添加一个next按钮来循环javascript中的元素

Question

我在firestore有一些东西。我想按顺序显示它们，但以随机序列显示。所以，我做了以下代码。这里我想显示一个特定的问题，然后当点击“下一步”按钮时，我想显示下一个项目。在这里，在forEach循环中，我将项目渲染到renderQuestion函数。他们正在使用HTML和CSS在前端显示它们。

但是我正在获取这个问题，他们一直显示所有内容，直到循环结束。他们不会等待按下“下一步”按钮。那么，我该怎么解决这个问题呢？我是新来的，如果我已经做错了什么，请原谅我。

renderQuestion = (qID, roomID) => {
  q.innerHTML = qID.data().question;
  ans1.innerHTML = qID.data().a;
  ans2.innerHTML = qID.data().b;
  ans3.innerHTML = qID.data().c;
  ans4.innerHTML = qID.data().d;
  /* next.addEventListener("click", (e) => { //not working
    e.preventDefault();
    console.log("done");
  }); */
};

runningExam = async (review) => {
  const totalQ = review.data().total_questions;
  let arr = [];
  for (let i = 0; i <= totalQ; i++) {
    arr.push(false);
  }
  let n = totalQ;

  while (n) {
    let randomNumber = getRandom(totalQ);
    if (!arr[randomNumber]) {
      arr[randomNumber] = true;
      await db
        .collection("examrooms")
        .doc(review.id)
        .collection("questions")
        .where("serial", "==", randomNumber)
        .get()
        .then((snapshot) => {
          snapshot.docs.forEach((doc) => {
            renderQuestion(doc, review);
          });
        });
      n--;
    }
  }
};

Answer 1

看起来您正试图阻止runningExam函数，直到用户按下按钮。我找到了另一个线程来实现这一点。

基本上，将renderQuestion函数转换为异步函数，并在每次调用时等待用户输入。

renderQuestion = async (qID, roomID) => {
  const timeout = async ms => new Promise(res => setTimeout(res, ms));
  let userClicked = false;

  q.innerHTML = qID.data().question;
  ans1.innerHTML = qID.data().a;
  ans2.innerHTML = qID.data().b;
  ans3.innerHTML = qID.data().c;
  ans4.innerHTML = qID.data().d;
  next.addEventListener("click", (e) => {
    userClicked = true;
    e.preventDefault();
    console.log("done");
  });
  
  while (userClicked === false) await timeout(50);
};

在运行考试中：

then( async (snapshot) => {
      for(let doc of snapshot.docs) {
        await renderQuestion(doc, review);
      };
  });

可能有更好的方法来编程这项任务，这只是一个可能的方法来做它的方式，你试图。