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

在 JavaScript 循环中添加延迟

在 JavaScript 中，经常会遇到需要在循环中添加延迟来控制执行速度的场景。然而，实现这种延迟可能很棘手。

原始方法及其陷阱

最初，使用下面的代码尝试为循环的每次迭代引入 3 秒的延迟：

alert('hi');

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

但是，这种方法未能达到预期的结果，因为 setTimeout() 函数是非阻塞的。结果，循环快速执行，快速连续启动多个 3 秒超时触发器。这导致第一个警报（'hello'）弹出窗口在 3 秒后出现，随后不断出现警报（'hello'）弹出窗口，没有任何延迟。

解决延迟问题

为了解决这个问题，建议采用以下方法：

var i = 1;                  // Set counter to 1

function myLoop() {         // Create loop function
  setTimeout(function() {   // Call 3s setTimeout when loop is called
    console.log('hello');   // Your code here
    i++;                    // Increment counter
    if (i < 10) {           // If counter < 10, call loop function
      myLoop();             // .. again, triggering another 
    }                       // .. setTimeout()
  }, 3000)
}

myLoop();                   // Start the loop

这种修改后的方法利用了递归函数， myLoop()，每当调用该函数时都会启动 3 秒的 setTimeout()。通过在 setTimeout() 回调中递增计数器 i，该函数可以在延迟后继续循环迭代。这确保了循环的后续迭代在执行之前等待指定的时间。

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