javascript - 如何在下一次迭代之前在 JavaScript 循环中添加延迟?
问题描述
该页面现已完成并且可以顺利运行。看看codepen上的结果:
https://codepen.io/Lietsaki/pen/pXOeKO
我正在制作一个简单的网站,其中包含有关 Doge meme 的一些信息。我希望在每个部分都弹出一些短语,所以我添加了一个带有“display: none”的类,并在 JS 中设置了一些事件以在用户单击下一部分时删除这些类。
但是,到目前为止,我只能一次删除所有类,而不是每 n 秒删除一个类。
我尝试使用带有 setInterval 的 for 循环,但它没有用。所以我尝试制作一个循环直到满足 setTimeout 条件的函数,但这会立即删除所有类并引发控制台错误:
“未捕获的类型错误:无法在 whoisdoge.js:83 处的 addPhrase (whoisdoge.js:78) 处读取未定义的属性 'classList'”
请检查下面的代码。
// 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);
}
}
解决方案
您的函数正在中断,因为您试图在数组中只有 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 - 如何获得索引使用 forEach 循环?
- asp.net - Visual Studio ADO.NET 实体框架向导未显示 PostgreSql 数据提供程序
- javascript - 单击时仅触发一个和第一个 div
- kotlin - Apache Flink - timerService,onTimer 获取整个事件
- windows - 将用户名/密码直接传递给 openVPN CLI
- apache - Apache2服务器,不同机器上的html文件
- python-requests-html - “requests-html”代理设置不起作用
- python - bsc 网络上的私钥
- apache - 如何使用 Apache 2.4.46 在 CentOS7 上启用 http2
- javascript - Google 表格 - 如何根据同一行的编辑 URL 索引获取列的行索引?