IIFE は高速ループにおけるイベント リスナーの制限を克服するのにどのように役立ちますか?

クロージャを使用した高速ループでの EventListeners の制限を克服する

課題:
for ループを頻繁に使用して複数のオブジェクトにイベント リスナーを追加するすべてのリスナーが JavaScript の同じオブジェクトをターゲットにすることになります。これはクロージャのスコープが原因で発生します。

解決策:
この問題を解決するには、ループ内で Immediately Invoked Function Expression (IIFE) を使用します。これにより、反復ごとに新しいスコープが作成され、変数を正しく参照できるようになります。

例:

// Function to run on click:
function makeItHappen(elem, elem2) {
    var el = document.getElementById(elem);
    el.style.backgroundColor = "red";
    var el2 = document.getElementById(elem2);
    el2.style.backgroundColor = "blue";
}

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i <p><strong>説明:</strong><br>このコードでは、IIFE を使用して反復ごとに新しいスコープを作成します。これにより、変数 boxa と boxb が正しく参照され、イベント リスナーが適切なコンテナ要素に割り当てられるようになります。</p><p><strong>重要な洞察:</strong><br>ループを操作する場合、JavaScript ではクロージャが重要です。これには値の受け渡しが含まれます。 IIFE を使用して新しいスコープを作成すると、クロージャ関連の問題を回避し、コードが意図したとおりに動作するようにすることができます。</p>

以上がIIFE は高速ループにおけるイベント リスナーの制限を克服するのにどのように役立ちますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。