ループ内のクリック ハンドラーが予期しない動作を示すのはなぜですか?

ループ内のクリック ハンドラーの適切なクロージャ管理

問題:

ループ内の複数の要素にクリック ハンドラーを割り当てると、予期せぬ動作につながります。具体的には、特定の要素をクリックすると、その要素に関係のないアクションがトリガーされる場合があります。この問題の根本原因は何ですか?

説明:

この問題は、ループ内でクロージャを使用するときに発生します。クロージャがループ内で作成されると、ループ変数への参照が保持されます。この場合、その変数は i です。ただし、ループが進行するにつれて、i は反復ごとに更新されます。その結果、クリック ハンドラーが実行されると、実際にどの要素がクリックされたかに関係なく、i の最終値 (この場合は 20) が使用されます。

解決策:

この問題に対処するには、コールバック関数を使用して、クリック ハンドラーごとに新しいクロージャを作成できます。これにより、各ハンドラーがループ変数への独自の一意の参照を持つことが保証されます。

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

ループ内で、このコールバック関数を各クリック ハンドラーに割り当てて、各要素の i の正しい値を維持できます。

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

現代のオルタナティブES6:

ES6 では、ブロック スコープの変数を許可する let キーワードが導入されています。これは、ループ内の i 変数がそのループに対してローカルになることを意味し、コールバック関数の必要性がなくなります。

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

このアプローチはより簡潔で読みやすいため、現代のアプリケーションで推奨されるオプションになります。 JavaScript の開発

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