如何在 JavaScript 循环中正确实现延迟？

在 JavaScript 循环中实现延迟

在 JavaScript 中使用循环时，有时需要引入延迟或睡眠周期来控制执行流动。让我们探索如何使用 setTimeout() 函数来实现此目的。

尝试 1：使用 setTimeout()

一种常见的方法是使用 setTimeout() 创建一个基于时间的延迟。但是，将 setTimeout() 直接放在循环内可能会导致意外行为。例如，以下代码尝试将每次迭代延迟 3 秒：

for (var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

虽然此代码最初会在 3 秒后显示消息“hello”，但随后它将连续显示该消息，没有任何延迟。发生这种情况是因为 setTimeout() 是非阻塞的并立即返回，允许循环在延迟时间过去之前完成。

替代方法：迭代循环

到为了达到所需的延迟，我们可以使用迭代循环，并在 a 中调用 setTimeout() function:

var i = 1;

function myLoop() {
  setTimeout(function () {
    console.log('hello');
    i++;
    if (i < 10) {
      myLoop();
    }
  }, 3000);
}

myLoop();

在这种情况下，首先调用函数 myLoop()，设置第一个 setTimeout() 触发器。然后，在 setTimeout() 回调中，打印消息，递增计数器，如果计数器仍然小于 10，则再次调用 myLoop() 函数。这确保了只有在 3 秒的延迟过去后才会触发循环的下一次迭代。

通过将迭代循环与 setTimeout() 结合使用，您可以有效地在 JavaScript 循环中引入延迟并控制执行流程精确。

以上是如何在 JavaScript 循环中正确实现延迟？的详细内容。更多信息请关注PHP中文网其他相关文章！