如何使用 setTimeout() 正确地向 JavaScript 循环添加延迟？

如何在带有超时的 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中文网其他相关文章！