如何使用 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中文網其他相關文章！