如何在JavaScript循環中實現延遲執行？

Question

我想在一個while循環中加入延遲/睡眠：

我試了以下的方法：

alert('hi');

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

只有第一種情況是正確的：在顯示alert('hi')後，它將等待3秒鐘，然後顯示alert('hello' )，但接下來alert('hello')將會不斷重複顯示。

我希望的是，在顯示alert('hello')後的3秒鐘後，它需要再等待3秒鐘才能再次顯示alert(' hello')，以此類推。

Answer 1

自從ES7以後，有一個更好的方法可以等待循環：

// 返回一个在“ms”毫秒后解析的Promise
const timer = ms => new Promise(res => setTimeout(res, ms))

async function load () { // 我们需要将循环包装在一个异步函数中才能使其工作
  for (var i = 0; i < 3; i++) {
    console.log(i);
    await timer(3000); // 然后可以等待创建的Promise
  }
}

load();

當引擎到達await部分時，它設定一個逾時並暫停執行async函數#。然後，當逾時完成時，執行在該點繼續。這非常有用，因為您可以延遲（1）巢狀循環，（2）有條件的，（3）巢狀函數：

async function task(i) { // 3
  await timer(1000);
  console.log(`Task ${i} done!`);
}

async function main() {
  for(let i = 0; i < 100; i+= 10) {
    for(let j = 0; j < 10; j++) { // 1
      if(j % 2) { // 2
        await task(i + j);
      }
    }
  }
}
    
main();

function timer(ms) { return new Promise(res => setTimeout(res, ms)); }

MDN上的參考資料

儘管ES7現在已經被NodeJS和現代瀏覽器支持，但您可能希望使用使用BabelJS進行轉譯，以便在任何地方運行。

Answer 2

setTimeout() 函數是非阻塞的，並且會立即傳回。因此，您的循環會非常快速地迭代，並且會在快速連續的情況下觸發3秒的超時。這就是為什麼您的第一個警報在3秒鐘後彈出，而其他所有警報都會連續跟隨而沒有任何延遲。

您可能想使用類似以下的程式碼：

var i = 1;                  //  将计数器设置为1

function myLoop() {         //  创建一个循环函数
  setTimeout(function() {   //  当调用循环时，调用一个3秒的setTimeout
    console.log('hello');   //  在这里写入您的代码
    i++;                    //  增加计数器
    if (i < 10) {           //  如果计数器小于10，则调用循环函数
      myLoop();             //  ..  再次触发另一个setTimeout()
    }                       //  ..  
  }, 3000)
}

myLoop();                   //  启动循环