Comment puis-je éviter les pièges de fermeture lors de l'attribution de gestionnaires de clics dans des boucles ?

Piège courant : fermetures dans les boucles

Lorsque vous travaillez avec une boucle pour attribuer des gestionnaires de clics à plusieurs éléments, il est facile de tomber dans le piège de créer involontairement des fermetures. Cela peut entraîner un comportement inattendu, comme le montre le code JavaScript fourni.

Dans l'exemple donné, le problème réside dans la fonction de gestionnaire de clics pour chaque élément. En l'enfermant dans une boucle, nous créons une fermeture qui fait référence à la variable i de la boucle. Cependant, comme i change à chaque itération, lorsque l'événement click se produit, il accède toujours à la valeur finale de i (dans ce cas, 20) au lieu de la valeur prévue pour l'élément spécifique.

Solution :

Pour éviter ce problème de fermeture, il est nécessaire de créer une fonction de rappel qui encapsule la valeur souhaitée. En utilisant une expression de fonction immédiatement invoquée (IIFE), nous pouvons y parvenir :

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

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

Avec cette approche, la fonction de rappel capture la valeur actuelle de i pour chaque itération de boucle, garantissant que la valeur correcte est transmise à le gestionnaire de clics.

Solution moderne avec ES6 :

Dans ES6, le mot-clé let peut être utilisé pour créez une variable locale pour chaque itération de boucle. Cela élimine le besoin de contourner le problème avec la fonction de rappel :

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

Cette solution est plus concise et évite les risques de problèmes de fermeture lors de la gestion des événements de clic dans les boucles.

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!