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

Question

while ループに遅延/スリープを追加したいです:

次のことを試しました:

alert('hi');

for(var start = 1; start <10; start ) {
  setTimeout(関数() {
    アラート('こんにちは');
  }, 3000);
}

最初のケースのみが正しいです。alert('hi') を表示した後、3 秒待ってから、alert('hello' )< を表示します。 /code> ですが、その後 alert('hello') が繰り返し表示されます。

私が望むのは、alert('hello') を表示してから 3 秒後、alert('hello')<を表示するまでさらに 3 秒待つ必要があるということです。 ;/code> など。

Answer 1

ES7 以降、waitloop:

を実行するより良い方法があります。 リーリー

エンジンが await セクションに到達すると、タイムアウトを設定し、async 関数 の実行を一時停止します。その後、タイムアウトが完了すると、その時点で実行が続行されます。これは、(1) ネストされたループ、(2) 条件、(3) ネストされた関数を延期できるため、非常に便利です。

リーリー

MDN の参考資料

ES7 は現在 NodeJS と最新のブラウザーでサポートされていますが、どこでも実行できるように

BabelJS でトランスパイルすることもできます。

Answer 2

setTimeout() この関数はノンブロッキングで、すぐに戻ります。したがって、ループは非常に高速に反復され、3 秒のタイムアウトが立て続けにトリガーされます。そのため、最初のアラートは 3 秒後にポップアップし、他のすべてのアラートは遅延なく継続して表示されます。

次のようなコードを使用するとよいでしょう:

リーリー