setTimeout() を使用して JavaScript ループに遅延を適切に追加する方法

タイムアウトを使用して JavaScript ループに遅延を追加する方法

JavaScript では、setTimeout を使用してループ内に遅延を追加できます。 （） 関数。ただし、予期しない結果を避けるために、その動作を理解することが重要です。

次の例を考えてみましょう:

alert('hi');

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

このコードは、テキスト「hi」を含むアラートを表示し、その後、 3 秒の遅延後に「hello」というテキストを送信します。この遅延は後続の反復で繰り返されます。ただし、実際には、最初の反復のみが意図したとおりに動作します。

この動作の理由は、setTimeout() の非ブロック的な性質にあります。これはタイマーをトリガーしますが、すぐに戻り、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

この例では、このアプローチでは、カウンターが初期化され、ループ内でインクリメントされます。ループ関数は setTimeout() 内で呼び出され、各反復の実行前に 3 秒の遅延が確保されます。 setTimeout() のコールバック内でループを維持することで、アラート間の望ましい間隔が実現されます。

以上がsetTimeout() を使用して JavaScript ループに遅延を適切に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。