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

Résoudre les problèmes de fermeture lors de l'affectation des gestionnaires de clics dans les boucles

Lors de l'attribution de gestionnaires de clics à plusieurs éléments d'une boucle, un piège courant survient en raison des fermetures en JavaScript. Le code fourni présente ce problème :

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

Ce code vise à afficher l'index de l'élément cliqué lorsqu'un clic se produit. Cependant, il affiche de manière incorrecte « vous avez cliqué sur 20 » pour chaque clic, au lieu d'afficher l'index réel. Ce comportement provient de la fermeture créée dans la boucle.

Solution : Utilisation de fonctions de rappel

Pour résoudre ce problème, nous pouvons utiliser les fonctions de rappel comme indiqué ci-dessous :

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

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

Dans cette version mise à jour, une fonction de rappel est créée au sein de la boucle. Cette fonction capture la valeur actuelle de « i », garantissant que l'index correct est affiché lorsque l'élément est cliqué.

Exploiter le mot-clé let d'ES6

Si la syntaxe ES6 est disponible, nous pouvons utiliser la let mot-clé pour obtenir le même résultat de manière plus concise :

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

Le mot-clé let garantit que « i » est défini localement dans la boucle, évitant ainsi la fermeture problèmes et affichage de l'index cliqué correct lors de l'activation de chaque élément.

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!