添加下一个按钮以循环遍历javascript中的元素

Posted 2023-03-07

【中文标题】添加下一个按钮以循环遍历javascript中的元素

【英文标题】：Adding a next Button to loop through elements in javascript

【发布时间】：2021-08-18 01:33:34

【问题描述】：

我在 firestore 中有一些项目。我想按顺序显示它们，但要随机显示。所以，我做了以下代码。在这里，我想显示一个特定的问题，然后当单击“下一步”按钮时，我想显示下一个项目。在这里，在 forEach 循环中，我将项目呈现给 renderQuestion 函数。他们使用 html 和 CSS 在前端展示它们。

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

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--;
    
  
;

【参考方案1】：

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

基本上，将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);
;

在runningExam:

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

可能有更好的方法来编写此任务，这只是按照您尝试的方式执行此操作的一种可能方法。

【讨论】：

不幸的是，这不起作用。它会一直显示所有项目，并且不会像以前那样等待“下一步”按钮:(

我的错，那是因为 forEach 不适用于 async/await。我更新了runningExam 函数来解决这个问题。

谢谢，它成功了。但是，我很想知道不等待与 forEach 合作？

Here 是对 forEach 实际实现的源代码的解释。我也不是很明白，今天才学的：）