javascript - 如何在下一次迭代之前在 JavaScript 循环中添加延迟？

Question

[Solved thanks to the best answer here]

该页面现已完成并且可以顺利运行。看看 codepen 上的结果:

https://codepen.io/Lietsaki/pen/pXOeKO

---

我正在制作一个简单的网站，其中包含一些关于 Doge 模因的信息。我希望在每个部分都弹出一些短语，所以我添加了一个带有“display: none”的类，并在 JS 中设置了一些事件，以便在用户点击下一节时删除这些类。

但是，到目前为止，我只能一次删除所有类，而不是每 n 秒删除一个类。

我试过将 for 循环与 setInterval 结合使用，但没有成功。所以我尝试制作一个循环函数，直到满足 setTimeout 的条件，但它会立即删除所有类并抛出控制台错误:

“未捕获的类型错误:无法读取未定义的属性‘classList’ 在 addPhrase (whoisdoge.js:78) 在 whoisdoge.js:83"

请检查下面的代码。

// Select the phrases with the class ".phrase1"

var phrase1 = document.querySelectorAll(".phrase1");

// Turn it into an array and get its length(30) into a variable
var phrase1Arr = Array.from(phrase1);


// Function to remove a class every 3 seconds (NOT WORKING)

function addPhrase(l){

    phrase1Arr[l].classList.remove("disappear");

    if (l < 30){
       setTimeout(function(){
           l++;
           addPhrase(l)
       }, 3000);
    }

}

Answer 1

您的函数正在中断，因为您试图在数组中只有 30 个元素时删除索引 30。 (所以你试图删除第 31 个元素)

您应该将 remove 移动到您已有的同一个 if 语句中。

function addPhrase(l){
  if (l < 30){
    phrase1Arr[l].classList.remove("disappear");
    setTimeout(function(){
      l++;
      addPhrase(l)
    }, 3000);
  }
}

---

您还在调用一个函数，而不是在您的 addEventListener 调用中引用一个函数:

sec0[0].addEventListener("click", addPhrase(0));

应该是

sec0[0].addEventListener("click", function(){
   addPhrase(0)
});