Wie kann ich Abschlussprobleme beim Zuweisen von Click-Handlern in JavaScript-Schleifen vermeiden?

Behebung von Abschlussproblemen bei der Zuweisung von Klick-Handlern innerhalb von Schleifen

Beim Zuweisen von Klick-Handlern zu mehreren Elementen in einer Schleife entsteht eine häufige Gefahr aufgrund von Abschlüssen in JavaScript. Der bereitgestellte Code weist dieses Problem auf:

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

Dieser Code zielt darauf ab, den Index des angeklickten Elements anzuzeigen, wenn ein Klick erfolgt. Allerdings wird bei jedem Klick fälschlicherweise „Sie haben auf 20 geklickt“ angezeigt, anstatt den tatsächlichen Index anzuzeigen. Dieses Verhalten ist auf den in der Schleife erzeugten Abschluss zurückzuführen.

Lösung: Einsatz von Callback-Funktionen

Um dieses Problem zu beheben, können wir Callback-Funktionen wie unten gezeigt verwenden:

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

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

In dieser aktualisierten Version wird innerhalb der Schleife eine Callback-Funktion erstellt. Diese Funktion erfasst den aktuellen Wert von „i“ und stellt sicher, dass der richtige Index angezeigt wird, wenn auf das Element geklickt wird.

Nutzung des let-Schlüsselworts von ES6

Wenn die ES6-Syntax verfügbar ist, können wir das verwenden let-Schlüsselwort, um das gleiche Ergebnis prägnanter zu erzielen:

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

Das let-Schlüsselwort stellt sicher, dass „i“ lokal innerhalb der Schleife gültig ist, wodurch ein Schließen vermieden wird Probleme und Anzeige des korrekten angeklickten Index bei der Aktivierung jedes Elements.

Das obige ist der detaillierte Inhalt vonWie kann ich Abschlussprobleme beim Zuweisen von Click-Handlern in JavaScript-Schleifen vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!