BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JavaScriptのループにディレイを追加するには？

2022-03-21 04:20:26

質問

の中にディレイ/スリープを追加したい。 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秒後に alert('hi') の場合、2回目も3秒待つ必要があります。 alert('hello') といった具合です。

どのように解決するのですか？

その 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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します