Fermetures dans une boucle for

Question

Les fermetures dans une boucle me causent des problèmes. Je pense que je dois faire une autre fonction qui renvoie une fonction pour résoudre le problème, mais je ne peux pas l'obtenir pour fonctionner avec mon code jQuery.

Voici le problème fondamental sous une forme simplifiée:

function foo(val) { 
    alert(val); 
} 

for (var i = 0; i < 3; i++) { 
    $('#button'+i).click(function(){ 
    foo(i); 
    }); 
} 

cliquant naturellement sur l'un des trois boutons donnera une alerte en disant 3. La fonctionnalité que je veux est que cliquer sur le bouton 1 donnera une alerte disant 1, le bouton 2 dira 2 etc.

Comment puis-je le faire faire cela?

Answer 1

Voir la méthode bind.

$('#button'+i).bind('click', {button: i}, function(event) { 
    foo(event.data.button); 
}); 

De la documentation:

Le paramètre optionnel EventData est pas couramment utilisé. Lorsqu'il est fourni, cet argument nous permet de transmettre des informations supplémentaires au gestionnaire. Une pratique utilisation de ce paramètre est de travailler autour de problèmes causés par les fermetures

Answer 2

Utilisez la fonction .each de jquery - Je suppose que vous une boucle à travers des éléments similaires - il faut donc ajouter le clic en utilisant quelque chose comme:

$(element).children(class).each(function(i){ 
    $(this).click(function(){ 
     foo(i); 
    }); 
}); 

Non testé mais j'utilise toujours cette structure si possible.

Answer 3

Ou juste de fabriquer une nouvelle fonction, comme vous le décrivez. Cela ressemblerait à ceci:

function foo(val) { 
    return function() { 
     alert(val); 
    } 
} 

for (var i = 0; i < 3; i++) { 
    $('#button'+i).click(foo(i)); 
} 

Je suis assez sûr que la solution de Mehrdad ne fonctionne pas. Lorsque vous voyez des personnes copier dans une variable temporaire, c'est généralement pour enregistrer la valeur de "this" qui peut être différente dans une portée enfant interne.

Answer 4

La solution @Andy est la plus belle. Mais vous pouvez également utiliser le scoping Javascript pour vous aider à sauvegarder la valeur de votre fermeture.

Vous le faites en créant une nouvelle portée dans votre corps de boucle en exécutant une fonction anonyme.

for (var i = 0; i < 3; i++) { 
    (function(){ 
    var index = i; 
    $('#button'+index).click(function(){ 
     foo(index); 
    }); 
    })(); 
} 

Etant donné que le corps de la boucle est un nouveau champ d'application à chaque itération, la variable d'index est dupliquée avec la valeur correcte à chaque itération.

Answer 5

Essayez ce code:

function foo(val) { 
    alert(val); 
} 

var funMaker = function(k) { 
    return function() { 
    foo(k); 
    }; 
}; 

for (var i = 0; i < 3; i++) { 
    $('#button'+i).click(funMaker(i)); 
} 

Quelques points importants ici:

• JavaScript est fonction scope. Si vous voulez une nouvelle portée (plus profonde), vous devez créer une fonction pour la maintenir.
• Cette solution est spécifique à Javascript, elle fonctionne avec ou sans jQuery.
• La solution fonctionne parce que chaque valeur de i est copiée dans une nouvelle étendue en tant que k, et la fonction de retour de funMaker se ferme autour de k (qui ne change pas dans la boucle), et non pas autour de i (qui fait).
• Votre code ne fonctionne pas car la fonction que vous transmettez à click ne possède pas le i, il se ferme sur le i de son créateur, et que i change dans la boucle.
• L'exemple aurait pu être écrit avec funMaker en ligne, mais j'utilise généralement de telles fonctions auxiliaires pour rendre les choses plus claires.
• L'argument de funMaker est k, mais cela ne fait aucune différence, il aurait pu être i sans aucun problème, car il existe dans le cadre de la fonction funMaker. L'une des explications les plus claires du modèle d'évaluation 'Environnement' se trouve dans 'Structure et Interprétation des Programmes Informatiques', par Sussman & Abelson (http://mitpress.mit.edu/sicp/ texte complet disponible en ligne, pas facile à lire) - voir section 3.2. Puisque JavaScript est vraiment Scheme avec la syntaxe C, cette explication est OK.

EDIT: Correction d'une ponctuation.