ループ内でクリック ハンドラーを割り当てるときにクロージャの落とし穴を回避するにはどうすればよいですか?

よくある落とし穴: ループ内のクロージャ

ループを使用してクリック ハンドラーを複数の要素に割り当てると、簡単に罠に陥ります。意図せずクロージャを作成してしまうこと。これにより、提供されている JavaScript コードに示されているように、予期しない動作が発生する可能性があります。

指定された例では、問題は各要素のクリック ハンドラー関数にあります。これをループ内で囲むことにより、ループから変数 i を参照するクロージャを作成します。ただし、i は反復ごとに変化するため、クリック イベントが発生すると、特定の要素の意図した値ではなく、常に i の最終値 (この場合は 20) にアクセスします。

解決策:

このクロージャーの問題を回避するには、目的の値をカプセル化するコールバック関数を作成する必要があります。即時呼び出し関数式 (IIFE) を使用すると、次のことを実現できます。

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

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

このアプローチでは、コールバック関数がループ反復ごとに i の現在値を取得し、正しい値が確実に渡されるようにします。クリック ハンドラー。

ES6 を使用した最新のソリューション:

ES6 では、let キーワードを使用して、ループ反復ごとにローカル変数を作成できます。これにより、コールバック関数による回避策が不要になります。

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

このソリューションはより簡潔で、ループ内でクリック イベントを処理する際にクロージャの問題が発生する可能性を回避します。

以上がループ内でクリック ハンドラーを割り当てるときにクロージャの落とし穴を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。