Question

页面现已完成并且可以正常工作。看看在Codepen上的结果：

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

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

我已经尝试过使用带有setInterval的for循环，但是没有用。因此，我尝试制作一个循环直到setTimeout满足条件的函数，但是该函数会立即删除所有类并抛出控制台错误：

“未捕获的TypeError：无法读取未定义的属性'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个元素）

您应将删除操作移至已具有的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)
});

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

1 个答案: