Pourquoi ma boucle JavaScript affiche-t-elle toujours la valeur finale de la variable de compteur lors de l'association de gestionnaires d'événements ?

La tristement célèbre anomalie de boucle JavaScript : expliquée

Le fameux problème de boucle JavaScript survient lorsque vous tentez d'attacher des gestionnaires d'événements à des éléments générés dynamiquement à l'aide d'une boucle. Dans l'extrait suivant :

function addLinks() {
  for (var i = 0, link; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function () {
      alert(i); // WRONG: i will always be 5
    };
    document.body.appendChild(link);
  }
}

Lorsque l'utilisateur clique sur l'un des liens générés, l'alerte affiche toujours « lien 5 ». En effet, les variables JavaScript définies avec var sont limitées à une fonction et non à un bloc. Lorsque la boucle se termine, i contient la valeur 5 et toutes les fonctions internes y font référence, conduisant à une sortie uniforme.

La solution corrigée consiste à capturer la valeur de i dans une fermeture. Considérez cet extrait :

function addLinks() {
  for (var i = 0, link; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function (num) { // Closure around i
      return function () {
        alert(num); // num retains its original value
      };
    }(i); // Execute the outer function immediately to capture i
    document.body.appendChild(link);
  }
}

Dans ce cas, num est lié à la valeur actuelle de i pour chaque itération. Lorsque la fonction interne est exécutée, num est systématiquement défini sur la valeur de i au moment de l'exécution de la boucle.

De plus, il existe une alternative efficace qui exploite le nœud DOM pour stocker les données :

function linkListener() {
  alert(this.i);
}

function addLinks() {
  for (var i = 0; i < 5; ++i) {
    var link = document.createElement('a');
    link.appendChild(document.createTextNode('Link ' + i));
    link.i = i;
    link.onclick = linkListener;
    document.body.appendChild(link);
  }
}

En attachant des informations à l'élément DOM lui-même, le besoin d'objets de fonction supplémentaires est contourné, améliorant ainsi l'efficacité.

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!