Wie kann ich Schließungsfallen bei der Zuweisung von Click-Handlern in Schleifen vermeiden?

Häufige Falle: Abschlüsse in Schleifen

Wenn Sie mit einer Schleife arbeiten, um Click-Handlern mehreren Elementen zuzuweisen, tappen Sie leicht in die Falle der unbeabsichtigten Schaffung von Schließungen. Dies kann zu unerwartetem Verhalten führen, wie im bereitgestellten JavaScript-Code gezeigt.

Im gegebenen Beispiel liegt das Problem in der Click-Handler-Funktion für jedes Element. Indem wir es in eine Schleife einschließen, erstellen wir einen Abschluss, der auf die Variable i aus der Schleife verweist. Da sich i jedoch mit jeder Iteration ändert, greift es beim Eintreten des Klickereignisses immer auf den Endwert von i (in diesem Fall 20) statt auf den beabsichtigten Wert für das spezifische Element zu.

Lösung :

Um dieses Abschlussproblem zu vermeiden, ist es notwendig, eine Rückruffunktion zu erstellen, die den gewünschten Wert kapselt. Mithilfe eines sofort aufgerufenen Funktionsausdrucks (IIFE) können wir Folgendes erreichen:

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

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

Mit diesem Ansatz erfasst die Rückruffunktion den aktuellen Wert von i für jede Schleifeniteration und stellt so sicher, dass der richtige Wert an übergeben wird der Click-Handler.

Moderne Lösung mit ES6:

In ES6 kann das Schlüsselwort let zum Erstellen verwendet werden eine lokale Variable für jede Schleifeniteration. Dadurch entfällt die Notwendigkeit einer Problemumgehung mit der Rückruffunktion:

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

Diese Lösung ist prägnanter und vermeidet das Potenzial für Abschlussprobleme bei der Verarbeitung von Klickereignissen in Schleifen.

Das obige ist der detaillierte Inhalt vonWie kann ich Schließungsfallen bei der Zuweisung von Click-Handlern in Schleifen vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!