Pourquoi les gestionnaires de clics basés sur des boucles en JavaScript affichent-ils parfois des valeurs inattendues ?

Gestion des événements de clic dans une boucle : comprendre les pièges de la fermeture

Lors de l'attribution de gestionnaires de clics à plusieurs éléments avec une boucle, il est essentiel d'en être conscient du mécanisme de fermeture de JavaScript. Une erreur courante consiste à créer des fermetures dans une boucle sans utiliser de fonctions de rappel. Cela peut conduire à un comportement inattendu.

Dans l'extrait de code fourni :

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

Le comportement attendu est que cliquer sur #mydiv3 afficherait "vous avez cliqué sur 3". Cependant, le code utilise incorrectement la variable i, qui est une variable globale dans la boucle. Par conséquent, la variable i contient la valeur finale de 20, provoquant un message d'alerte incorrect.

La bonne façon d'attribuer des gestionnaires de clics dans une boucle consiste à utiliser des fonctions de rappel. Ces fonctions peuvent créer une nouvelle portée pour la variable i, garantissant que chaque itération de la boucle a sa propre instance de i.

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

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

Une autre solution moderne, si vous utilisez ES6, consiste à utiliser le mot-clé let pour créer une variable locale pour chaque itération de la boucle :

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

Cette approche est plus propre et plus facile à comprendre. Il garantit que chaque gestionnaire de clics possède sa propre variable i, éliminant ainsi les pièges de fermeture et garantissant un comportement correct lors de la gestion des événements de clic dans une boucle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!