如何在带有超时的 JavaScript 循环中添加延迟
在 JavaScript 中，可以使用 setTimeout 在循环中添加延迟（） 功能。但是，了解其行为以避免意外结果非常重要。
考虑以下示例：
alert('hi');
for (var start = 1; start < 10; start++) {
setTimeout(function() {
alert('hello');
}, 3000);
}此代码旨在显示带有文本“hi”的警报，然后显示3 秒延迟后发送文本“hello”，并在后续迭代中重复该延迟。然而，实际上，只有第一次迭代才能按预期工作。
这种行为的原因在于 setTimeout() 的非阻塞性质。它触发一个计时器，但立即返回，允许循环在 3 秒延迟发生之前继续执行。这会导致立即发出“hello”警报，并连续显示后续警报，没有任何延迟。
要达到所需的效果，可以使用另一种方法：
var i = 1; // set your counter to 1
function myLoop() { // create a loop function
setTimeout(function() { // call a 3s setTimeout when the loop is called
console.log('hello'); // your code here
i++; // increment the counter
if (i < 10) { // if the counter < 10, call the loop function
myLoop(); // .. again which will trigger another
} // .. setTimeout()
}, 3000);
}
myLoop(); // start the loop在此方法中，计数器在循环内初始化并递增。循环函数在 setTimeout() 内部调用，确保每次迭代在执行前都有自己的 3 秒延迟。通过在 setTimeout() 回调中维护循环，可以实现所需的警报间隔。
以上是如何使用 setTimeout() 正确地向 JavaScript 循环添加延迟？的详细内容。更多信息请关注PHP中文网其他相关文章！
