minuscule javascript question de fermeture

Question

for(var i=0,len=btns.length;i<len;i++){ 
    (function(){ 
    btns[i].addEventListener('click',function(e){ 
     console.log(i) 
     },false) 
    })(i)}} 

Bonjour à tous, Je suis récemment en train d'apprendre Javascript. Dans le code ci-dessus pour comprendre un peu de fermeture, vous savez, il suffit de définir 3 boutons pour enregistrer 3 différents i.

Malheureusement, il a échoué. Je sais que je n'ai pas eu le point de fermeture. Pourquoi? J'exécute immédiatement la fonction pour que la i dans la fonction de rappel de l'auditeur ne partagera pas la même personne i

Hope peut aider ~

Answer 1

Vous passez la variable i à la fonction, mais la fonction ne tient pas compte de l'argument et lie juste à la i à l'intérieur de la fonction est la même variable que celle à l'extérieur (parce que vous spécifiez une liste de paramètres formels vides).

Par conséquent, votre boucle a terminé et a augmenté le i unique partagé entre toutes les fermetures à 3 avant que vous ayez une chance de pousser l'un des boutons. Réécrire function() avec function(i) et il aura une meilleure chance de travailler.

Answer 2

Essayez ceci où vous déclarez en fait un paramètre de la fonction afin que i obtient une définition locale dans la fonction:

for(var i = 0, len = btns.length; i < len; i++) { 
    (function(i){ 
     btns[i].addEventListener('click',function(e){ 
      console.log(i); 
     },false); 
    })(i); 
} 

Comme vous l'aviez, vous passez i comme paramètre à la fonction, mais pas réellement le définir comme un paramètre de sorte que le passé n'était pas utilisé. C'est une des raisons pour lesquelles c'est une mauvaise idée d'utiliser le même nom parce que ces types d'erreurs ne feront pas une erreur javascript. Je préfère cela avec un nom différent pour la variable interne donc il n'y a aucune chance de confusion entre les deux:

for(var i = 0, len = btns.length; i < len; i++) { 
    (function(loopVar){ 
     btns[loopVar].addEventListener('click',function(e){ 
      console.log(loopVar); 
     },false); 
    })(i); 
} 

Vous pouvez voir ce travail ici: http://jsfiddle.net/jfriend00/Hb5t3/