ホームページ > ウェブフロントエンド > jsチュートリアル > ループ内でクリック ハンドラーを割り当てるときにクロージャの落とし穴を回避するにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-11-29 03:47:09
オリジナル
986 人が閲覧しました

How Can I Avoid Closure Pitfalls When Assigning Click Handlers in Loops?

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

ループを使用してクリック ハンドラーを複数の要素に割り当てると、簡単に罠に陥ります。意図せずクロージャを作成してしまうこと。これにより、提供されている 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート