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