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