javascript: Utilisation de la contre-valeur actuelle de la boucle dans une fonction() {}?

Question

sur un site Web que je veux faire ceci: (simplifié)

myHandlers = new Array(); 
for(var i = 0; i < 7; i++) { 
    myHandlers.push(new Handler({ 
    handlerName: 'myHandler'+i, // works, e.g. ->myHandler1, 2, 3 etc. 
    handlerFunc: function(bla) { /*...*/ alert(i); } // doesn't work,all return 7 
    } 
} 

je pourrais mettre le compteur comme un autre attribut de mon gestionnaire (qui copie la valeur actuelle) et de l'utiliser dans ma fonction, mais je suppose que , il y a aussi un moyen de copier réellement cette valeur, non?

Answer 1

Lorsque handlerFunc est appelée, le i intérieur de la fonction se réfère au i de la boucle for. Mais que i n'a probablement plus la même valeur.

Utilisation d'une fermeture à se lier à la valeur courante de i dans le cadre d'une fonction anonyme:

handlerFunc: (function(i) { return function(bla) { /*...*/ alert(i); }; })(i) 

Voici une fonction anonyme (function(i) { … })(i) est utilisé et a immédiatement appelé. Cette fonction lie la valeur de i de la boucle for au i local. Ce i est alors indépendant du i de la boucle for.

Answer 2

var myHandlers = new Array(); 
for (var i = 0; i < 7; i++) { 
    myHandlers.push(new Handler({ 
    handlerName: 'myHandler'+i, // works, e.g. ->myHandler1, 2, 3 etc. 
    handlerFunc: 
    (function(i) { 
    return function(blah) { 
     alert(i) 
    } 
    })(i) 
    })) 
} 

Utiliser une fermeture pour lier le i si la valeur reste intacte

Answer 3

Dans votre exemple, i dans les fonctions est la même variable que i en dehors des fonctions. Comme i est incrémenté dans la boucle, il est donc incrémenté dans les fonctions. Par conséquent, si les fonctions sont appelées après la fin de la boucle, elles alertent toutes "7".

Vous devez créer une nouvelle variable avec l'étendue appropriée et y copier la valeur i.

Quelque chose comme ceci créerait l'effet désiré.

... 
var pushHandler = function(i) { 
    myHandlers.push(new Handler({ 
    handlerName: 'myHandler'+i, // works, e.g. ->myHandler1, 2, 3 etc. 
    handlerFunc: function(bla) { /*...*/ alert(i); } // doesn't work,all return 7 
    } 
} 
... 
for(var i = 0; i < 7; i++) { 
    pushHandler(i); 
} 

...