Wie können IIFEs dazu beitragen, die Einschränkungen von Ereignis-Listenern in schnellen Schleifen zu überwinden?

Überwindung der Einschränkung von EventListenern in schnellen Schleifen mithilfe von Abschlüssen

Herausforderung:
Ereignis-Listener häufig mithilfe einer for-Schleife zu mehreren Objekten hinzufügen führt dazu, dass alle Listener auf dasselbe Objekt in JavaScript abzielen. Dies geschieht aufgrund des Gültigkeitsbereichs des Abschlusses.

Lösung:
Um dieses Problem zu beheben, verwenden Sie einen Immediately Invoked Function Expression (IIFE) innerhalb der Schleife. Dadurch wird für jede Iteration ein neuer Bereich erstellt, sodass die Variablen korrekt referenziert werden können.

Beispiel:

// 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
}

Erklärung:
In diesem Code wird das IIFE verwendet, um für jede Iteration einen neuen Bereich zu erstellen. Dadurch wird sichergestellt, dass die Variablen boxa und boxb korrekt referenziert werden und die Ereignis-Listener den entsprechenden Containerelementen zugewiesen werden.

Wichtige Erkenntnis:
Abschlüsse sind in JavaScript bei der Arbeit mit Schleifen von entscheidender Bedeutung die die Übergabe von Werten beinhalten. Durch das Erstellen neuer Bereiche mithilfe von IIFEs können Sie Probleme im Zusammenhang mit dem Abschluss verhindern und sicherstellen, dass sich Ihr Code wie beabsichtigt verhält.

Das obige ist der detaillierte Inhalt vonWie können IIFEs dazu beitragen, die Einschränkungen von Ereignis-Listenern in schnellen Schleifen zu überwinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!