Pourquoi les gestionnaires de clics dans les boucles présentent-ils un comportement inattendu ?

Gestion appropriée des fermetures pour les gestionnaires de clics dans les boucles

Problème :

L'attribution de gestionnaires de clics à plusieurs éléments dans une boucle peut conduire à un comportement inattendu. Plus précisément, cliquer sur un élément particulier peut déclencher une action sans rapport avec cet élément. Quelle est la cause première de ce problème ?

Explication :

Le problème survient lors de l'utilisation de fermetures dans une boucle. Lorsqu'une fermeture est créée dans une boucle, elle conserve une référence à la variable de boucle. Dans ce cas, cette variable est i. Cependant, au fur et à mesure que la boucle progresse, i est mis à jour à chaque itération. Par conséquent, lorsque le gestionnaire de clics est exécuté, il utilise la valeur finale de i (20 dans ce cas), quel que soit l'élément sur lequel le clic a été effectué.

Solution :

Pour résoudre ce problème, une fonction de rappel peut être utilisée pour créer une nouvelle fermeture pour chaque gestionnaire de clic. Cela garantit que chaque gestionnaire a sa propre référence unique à la variable de boucle.

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

Dans la boucle, cette fonction de rappel peut être attribuée à chaque gestionnaire de clic, en préservant la valeur correcte de i pour chaque élément.

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

Alternative moderne dans ES6 :

ES6 introduit le mot-clé let, qui permet variables de portée bloc. Cela signifie que la variable i dans la boucle sera locale à cette boucle, éliminant ainsi le besoin d'une fonction de rappel.

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

Cette approche est plus concise et plus facile à lire, ce qui en fait une option privilégiée pour les environnements modernes. Développement JavaScript.

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!