JavaScript イベント処理で For ループを使用する際のクロージャの問題を回避するにはどうすればよいですか?

イベント処理ループにおけるクロージャの落とし穴

JavaScript では、for ループを処理するときにスコープとクロージャに注意することが重要です。提示されたシナリオで示されているように、適切なクロージャーのカプセル化を行わずに変数 i を使用してループ内でクリック ハンドラーを割り当てると、予期しない動作が発生します。

根本的な問題は、ループ内で宣言された i 変数がループ内で共有されるという事実に起因します。繰り返し。その結果、いずれかのクリック ハンドラーがトリガーされると、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 を使用している場合は、let キーワードを使用してブロック スコープの i 変数を作成できます。ループの各反復:

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

クロージャーの落とし穴に対処することで、これらのアプローチにより、各クリック ハンドラーが正しい i 値を表示するようになります。クリックされた特定の要素。

以上がJavaScript イベント処理で For ループを使用する際のクロージャの問題を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。