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 < elem.length; i += 2) {
    // IIFE to create a new scope for each iteration
    (function () {
        var k = i + 1;
        var boxa = elem[i].parentNode.id;
        var boxb = elem[k].parentNode.id;
        elem[i].addEventListener("click", function() { makeItHappen(boxa,boxb); }, false);
        elem[k].addEventListener("click", function() { makeItHappen(boxb,boxa); }, false);
    }()); // immediate invocation
}

説明:
このコードでは、IIFE を使用して反復ごとに新しいスコープを作成します。これにより、変数 boxa と boxb が正しく参照され、イベント リスナーが適切なコンテナ要素に割り当てられるようになります。

重要な洞察:
ループを操作する場合、JavaScript ではクロージャが重要です。これには値の受け渡しが含まれます。 IIFE を使用して新しいスコープを作成すると、クロージャ関連の問題を回避し、コードが意図したとおりに動作するようにすることができます。

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