Warum zeigen schleifenbasierte Click-Handler in JavaScript manchmal unerwartete Werte an?

Klick-Ereignisse in einer Schleife verarbeiten: Fallstricke bei Schließungen verstehen

Beim Zuweisen von Klick-Handlern zu mehreren Elementen mit einer Schleife ist es wichtig, sich dessen bewusst zu sein des JavaScript-Abschlussmechanismus. Ein häufiger Fehler besteht darin, Abschlüsse in einer Schleife zu erstellen, ohne Callback-Funktionen zu verwenden. Dies kann zu unerwartetem Verhalten führen.

Im bereitgestellten Codeausschnitt:

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

Das erwartete Verhalten besteht darin, dass beim Klicken auf #mydiv3 „Sie haben auf 3 geklickt“ angezeigt wird. Allerdings verwendet der Code fälschlicherweise die Variable i, die eine globale Variable in der Schleife ist. Infolgedessen enthält die i-Variable den Endwert 20, was zu einer falschen Warnmeldung führt.

Der richtige Weg, Klickhandler in einer Schleife zuzuweisen, ist die Verwendung von Rückruffunktionen. Diese Funktionen können einen neuen Bereich für die i-Variable erstellen und so sicherstellen, dass jede Iteration der Schleife ihre eigene Instanz von i hat.

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

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

Eine andere moderne Lösung besteht bei Verwendung von ES6 darin, das Schlüsselwort let zu verwenden Erstellen Sie für jede Iteration der Schleife eine lokale Variable:

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

Dieser Ansatz ist sauberer und leichter zu verstehen. Es stellt sicher, dass jeder Klick-Handler über eine eigene i-Variable verfügt, wodurch Fallstricke beim Schließen beseitigt werden und das korrekte Verhalten bei der Verarbeitung von Klickereignissen in einer Schleife sichergestellt wird.

Das obige ist der detaillierte Inhalt vonWarum zeigen schleifenbasierte Click-Handler in JavaScript manchmal unerwartete Werte an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!