Warum empfangen meine Event-Handler Werte aus der letzten Schleifeniteration in dynamisch erstellten Elementen?

Variablenreferenzen in Event-Handlern und Abschlüssen

In diesem Szenario erstellen Sie dynamisch Elemente mit Event-Handlern innerhalb einer Schleife. Zunächst besteht die Absicht darin, basierend auf der Schleifeniteration unterschiedliche Werte an den Ereignishandler zu übergeben. Es scheint jedoch, dass der Event-Handler die Werte aus der letzten Schleifeniteration empfängt, was auf ein Scoping-Problem hindeutet.

Tatsächlich liegt das Problem des Codes in der Verwendung anonymer Funktionen als Event-Handler innerhalb der Schleife. Wie Sie richtig vermuten, handelt es sich bei den Event-Handler-Funktionen um Abschlüsse, die auf die Variablen innerhalb der Schleife verweisen. Wenn das Ereignis ausgelöst wird, ist die Schleife abgeschlossen und die referenzierten Variablen enthalten die endgültigen Werte, die in der letzten Iteration zugewiesen wurden.

Implementieren eines Abschlusses

Um dieses Problem zu beheben Um die beabsichtigten Werte auszugeben und ordnungsgemäß an den Ereignishandler zu übergeben, müssen Sie einen Abschluss implementieren, der die Variablen zum Zeitpunkt der Schleifenausführung erfasst. Auf diese Weise erhält jeder Event-Handler seinen eigenen Verweis auf die spezifischen Werte, die er benötigt.

Der folgende überarbeitete Code integriert den Abschluss, indem er die Event-Handler-Funktion in eine andere anonyme Funktion einschließt, die sofort aufruft (auch bekannt als IIFE oder „Sofort aufgerufener Funktionsausdruck“):

for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s, c, a)
    {
        return function()
        {
            onStatusChanged(s, c, a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}

In diesem modifizierten Code gibt das innere IIFE die eigentliche Event-Handler-Funktion zurück und übernimmt dabei die notwendigen Parameter (select, callid, anotherid), die übergeben werden aus der Schleife. Indem Sie diese Werte zum Zeitpunkt der Schleifenausführung erfassen, erstellen Sie effektiv einen separaten Bereich für jeden Event-Handler.

Diese Technik stellt sicher, dass jeder Event-Handler einen eigenen Verweis auf die Werte hat, die er benötigt, wenn das Ereignis auftritt und aufgelöst wird das Problem der falschen Wertreferenzierung.

Das obige ist der detaillierte Inhalt vonWarum empfangen meine Event-Handler Werte aus der letzten Schleifeniteration in dynamisch erstellten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!