JavaScript ループに遅延を適切に実装するにはどうすればよいですか?

JavaScript ループに遅延を追加する

JavaScript では、実行ペースを制御するためにループ内に遅延が必要なシナリオがよく発生します。ただし、この遅延の実装は難しい場合があります。

独自のアプローチとその落とし穴

当初、以下のコードは、ループの反復ごとに 3 秒の遅延を導入するために使用されました。

alert('hi');

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

ただし、setTimeout() 関数はノンブロッキングであるため、このアプローチでは意図した結果を達成できませんでした。その結果、ループは迅速に実行され、複数の 3 秒タイムアウト トリガーが連続して開始されました。これにより、最初のalert('hello')ポップアップが3秒後に表示され、その後遅延なくalert('hello')ポップアップが継続的に表示されるようになりました。

遅延の問題の解決

この問題に対処するには、次のアプローチを採用することをお勧めします:

var i = 1;                  // Set counter to 1

function myLoop() {         // Create loop function
  setTimeout(function() {   // Call 3s setTimeout when loop is called
    console.log('hello');   // Your code here
    i++;                    // Increment counter
    if (i < 10) {           // If counter < 10, call loop function
      myLoop();             // .. again, triggering another 
    }                       // .. setTimeout()
  }, 3000)
}

myLoop();                   // Start the loop

この改訂されたアプローチでは、再帰関数を利用します。 myLoop() は、関数が呼び出されるたびに 3 秒間の setTimeout() を開始します。 setTimeout() コールバック内でカウンター i をインクリメントすることで、関数は遅延後にループの反復を継続できます。これにより、ループの後続の反復は実行前に指定された時間待機するようになります。

以上がJavaScript ループに遅延を適切に実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。