☰

JavaScript ループに遅延を追加するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript loops sleep
JavaScript ループに遅延を追加するにはどうすればいいですか? 質問する

ループ内に遅延/スリープを追加したいと思います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 秒後に after が表示されalert('hi')、2 回目には 3 秒待つ必要がある、alert('hello')というものです。

ベストアンサー1

のsetTimeout()関数は非ブロッキングであり、すぐに戻ります。したがって、ループは非常に速く反復され、3 秒のタイムアウト トリガーが次々に開始されます。これが、最初のアラートが 3 秒後にポップアップ表示され、残りのアラートが遅延なく連続して表示される理由です。

代わりに次のようなものを使用するとよいでしょう:

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

自己呼び出し関数を使用して、反復回数を引数として渡すことで、これを整理することもできます。

(function myLoop(i) {
  setTimeout(function() {
    console.log('hello'); //  your code here                
    if (--i) myLoop(i);   //  decrement i and call myLoop again if i > 0
  }, 3000)
})(10);                   //  pass the number of iterations as an argument

おすすめ記事