ループ内でイベント リスナーを使用するときに関数に正しい変数値を渡すにはどうすればよいですか?

JS 変数の値を関数に渡す方法

配列を反復処理し、各要素にイベント リスナーを追加する場合、ループの値カウンタ変数が期待どおりに保持されない可能性があります。リスナーは、現在の値をキャプチャする代わりに、ループが終了した後の最終値を使用します。この問題に対処し、実際の値 (参照ではなく) を関数に渡すには、次のアプローチを検討してください。

最新のブラウザ:

let または const キーワードを使用するブロック スコープの変数を宣言するには:

<code class="javascript">for (let i = 0; i < results.length; i++) {
  let marker = results[i];
  google.maps.event.addListener(marker, 'click', () => change_selection(i));
}</code>

古いブラウザ:

変数の値をネストされた関数にパラメーターとして渡すことで、変数の値を保持するための別のスコープを作成します。 :

<code class="javascript">for (var i = 0; i < results.length; i++) {
  (function (i) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() {
      change_selection(i);
    });
  })(i);
}</code>

匿名関数を利用し、変数を引数として渡すことにより、その値を効果的に関数に渡し、クロージャを作成します。これにより、各リスナーが作成時に正しい値にアクセスできるようになります。

以上がループ内でイベント リスナーを使用するときに関数に正しい変数値を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。