JavaScript のループベースのクリック ハンドラーで予期しない値が表示されることがあるのはなぜですか?

ループ内のクリック イベントの処理: クロージャの落とし穴について

ループを使用してクリック ハンドラーを複数の要素に割り当てる場合は、注意することが重要ですJavaScript のクロージャ メカニズム。よくある間違いは、コールバック関数を使用せずにループ内にクロージャを作成することです。これにより、予期しない動作が発生する可能性があります。

提供されたコード スニペット内:

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});

予期される動作は、#mydiv3 をクリックすると「3 をクリックしました」と表示されることです。ただし、コードでは、ループ内のグローバル変数である i 変数が誤って使用されています。その結果、変数 i は最終値 20 を保持し、誤った警告メッセージが表示されます。

ループ内でクリック ハンドラーを割り当てる正しい方法は、コールバック関数を使用することです。これらの関数は、変数 i の新しいスコープを作成し、ループの各反復に i の独自のインスタンスがあることを保証します。

function createCallback(i){
  return function(){
    alert('you clicked ' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click(createCallback(i));
  }
});

ES6 を使用する場合のもう 1 つの最新の解決策は、let キーワードを利用して、ループの反復ごとにローカル変数を作成します:

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

このアプローチはよりクリーンで理解しやすいです。これにより、各クリック ハンドラーが独自の i 変数を持つようになり、クロージャの落とし穴が排除され、ループ内でクリック イベントを処理するときに正しい動作が保証されます。

以上がJavaScript のループベースのクリック ハンドラーで予期しない値が表示されることがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。