Warum zeigen Click-Handler in Schleifen unerwartetes Verhalten?

Korrektes Abschlussmanagement für Klick-Handler in Schleifen

Problem:

Das Zuweisen von Klick-Handlern zu mehreren Elementen innerhalb einer Schleife kann zu unerwartetem Verhalten führen. Insbesondere kann das Klicken auf ein bestimmtes Element eine Aktion auslösen, die nichts mit diesem Element zu tun hat. Was ist die Hauptursache für dieses Problem?

Erklärung:

Das Problem tritt auf, wenn Abschlüsse innerhalb einer Schleife verwendet werden. Wenn ein Abschluss innerhalb einer Schleife erstellt wird, behält er einen Verweis auf die Schleifenvariable bei. In diesem Fall ist diese Variable i. Im weiteren Verlauf der Schleife wird i jedoch bei jeder Iteration aktualisiert. Wenn der Click-Handler ausgeführt wird, verwendet er daher den Endwert von i (in diesem Fall 20), unabhängig davon, auf welches Element tatsächlich geklickt wurde.

Lösung:

Um dieses Problem zu beheben, kann eine Rückruffunktion verwendet werden, um für jeden Klick-Handler einen neuen Abschluss zu erstellen. Dadurch wird sichergestellt, dass jeder Handler seinen eigenen eindeutigen Verweis auf die Schleifenvariable hat.

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

Innerhalb der Schleife kann diese Rückruffunktion jedem Click-Handler zugewiesen werden, wobei der korrekte Wert von i für jedes Element erhalten bleibt.

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

Moderne Alternative in ES6:

ES6 führt das Schlüsselwort let ein, das Folgendes ermöglicht blockbezogene Variablen. Dies bedeutet, dass die i-Variable innerhalb der Schleife lokal für diese Schleife ist, sodass keine Rückruffunktion erforderlich ist.

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

Dieser Ansatz ist prägnanter und einfacher zu lesen, was ihn zu einer bevorzugten Option für moderne JavaScript-Entwicklung.

Das obige ist der detaillierte Inhalt vonWarum zeigen Click-Handler in Schleifen unerwartetes Verhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!