「for」ループ内の「setTimeout」が予期しない値を出力するのはなぜですか?これはどのように修正できますか?

setTimeout を使用した for ループでの連続値の出力

問題:

以下の場合スクリプトでは、for ループ内で setTimeout 関数が使用され、値を順番に警告します。ただし、結果の出力では、予想どおり '1' と '2' ではなく、値 '3' が 2 回出力されることがわかります。

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

理由:

この問題は、for ループ内の i の値が時間の経過とともに変更されるのに、setTimeout 関数が元の値への参照のみを取得するために発生します。 variable.

解決策:

この問題に対処するには、i 変数を各タイムアウト関数の一意の値としてキャプチャする必要があります。これは、i を引数として取り、次の引数で setTimeout を呼び出す新しい関数を作成することで実現できます。

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

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

このアプローチでは、ループの各反復で i 変数の個別のコピーが作成されます。アラートされた値が期待どおりに連続して出力されるようにします。

以上が「for」ループ内の「setTimeout」が予期しない値を出力するのはなぜですか?これはどのように修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。