JavaScript の for ループ内でネストされた setTimeout が連続しない値を出力するのはなぜですか?

問題の理解: for ループでネストされた setTimeout での不連続な値の出力

JavaScript では、setTimeout のような非同期関数がコールバックをスケジュールします。遅延後に実行します。これをループ内に配置すると、コールバックによってアクセスされる変数がループの状態と同期しなくなる可能性がある予期しない動作が発生する可能性があります。

例: 不正な値のアラート

提供されたスクリプトを考えてみましょう:

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 100);
}

このコードは、値を警告することを目的としています。 1 と 2 を連続して出力しますが、代わりに 3 を 2 回出力します。その理由は、i の現在値を参照するコールバックを作成する setTimeout の非同期の性質にあります。

関数文字列なしで i を渡す

この問題に対処するには連続した値の出力を保証するには、setTimeout コールバックごとに i の個別のインスタンスを作成する必要があります。解決策は次のとおりです。

function doSetTimeout(i) {
  setTimeout(function() {
    alert(i);
  }, 100);
}

for (var i = 1; i <= 2; ++i)
  doSetTimeout(i);

コールバックごとに明示的な関数を作成し、i を引数として渡すことで、ループの反復ごとに i の個別のコピーを作成します。これにより、コールバックが実行時に i の正しい値を参照できるようになり、1 と 2 を連続して出力できるようになります。

以上がJavaScript の for ループ内でネストされた setTimeout が連続しない値を出力するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。