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

JavaScript ループでの遅延の実装

JavaScript でループを操作する場合、実行を制御するために遅延またはスリープ期間を導入する必要がある場合があります。流れ。 setTimeout() 関数を使用してこれを実現する方法を見てみましょう。

試み 1: setTimeout() を使用する

一般的なアプローチの 1 つは、setTimeout() を使用して時間ベースの遅延。ただし、setTimeout() をループ内に直接配置すると、予期しない動作が発生する可能性があります。たとえば、次のコードは各反復を 3 秒遅らせようとします:

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

このコードでは、最初は 3 秒後に「hello」というメッセージが表示されますが、その後は遅延なくメッセージが継続的に表示されます。これは、setTimeout() が非ブロッキングですぐに戻り、遅延期間が経過する前にループが完了できるために発生します。

代替アプローチ: 反復ループ

必要な遅延を達成するには、setTimeout() 呼び出しを含む反復ループを内部で使用できます。 function:

var i = 1;

function myLoop() {
  setTimeout(function () {
    console.log('hello');
    i++;
    if (i < 10) {
      myLoop();
    }
  }, 3000);
}

myLoop();

この場合、関数 myLoop() が最初に呼び出され、最初の setTimeout() トリガーが設定されます。次に、setTimeout() コールバック内で、メッセージが出力され、カウンターがインクリメントされ、カウンターがまだ 10 未満の場合は、myLoop() 関数が再度呼び出されます。これにより、ループの次の反復が 3 秒の遅延が経過した後にのみトリガーされるようになります。

反復ループを setTimeout() と組み合わせて使用​​することで、JavaScript ループに効果的に遅延を導入し、実行フローは正確です。

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