この JavaScript ループが「setTimeout」で予期しない結果を生成するのはなぜですか?

ループと setTimeout の非同期実行

次のスクリプトを考えてみましょう:

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

1 と 2 の期待値とは対照的に、スクリプトは 3 を 2 回出力します。この動作は、JavaScript のイベント ループの非同期の性質により発生します。

JavaScript イベント ループを理解する

JavaScript のイベント ループは、同期スタックと非同期キューの 2 つの段階でコードの実行を処理します。同期コードはスタック内ですぐに実行されますが、setTimeouts などの非同期コードは後で実行されるようにキューに配置されます。

ループの問題

スクリプト内の setTimeout コールバック関数は変数 i を使用します。ただし、i はループのすべての反復間で共有され、コールバックが実行されるまでに、常に最終値 2 を参照します。したがって、どちらの場合も 3 が出力されます。

正しいアプローチ

連続した値が出力されるようにするには、コールバック関数ごとに i の個別のコピーを作成します。これは、以下に示すように、関数クロージャを使用して実現できます。

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

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

このスクリプトでは、doSetTimeout 関数が i の値をクロージャのローカル変数としてキャプチャし、各コールバック関数が正しい値を使用するようにします。値。

以上がこの JavaScript ループが「setTimeout」で予期しない結果を生成するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。