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