problèmes de la fonction de rappel Javascript draggables dans 'pour' déclaration

Question

Je définis un tableau:

images_array[0]=['c5','user.png','100','100']; 
images_array[1]=['c6','user.png','300','400']; 
images_array[2]=['c7','mega1.jpg','400','500']; 

création draggables comme ce travail:

drag_array[images_array[0][0]]=new Draggable(images_array[0][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[0][0]]);}}); 

drag_array[images_array[1][0]]=new Draggable(images_array[1][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[1][0]]);}}); 

drag_array[images_array[2][0]]=new Draggable(images_array[2][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[2][0]]);}}); 

Création draggables dans une instruction for ne fonctionne pas sur le rappel fonction ...

for (i=0;i<images_array.length;i++) { 
drag_array[images_array[i][0]]=new Draggable(images_array[i][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[i][0]]);}}); 
} 

=> Firefox dit que images_array[i][0] ne définit pas ... Retrait de la fonction de rappel

drag_array[images_array[i][0]]=new Draggable(images_array[i][0], { revert: true}); 

=> fonctionne ... :(

Toute idée pourquoi le dernier argument de la fonction de rappel ne fonctionne pas? tx

Answer 1

Ceci est une erreur typique: Définir des fonctions dans une boucle. Si vous définissez une fonction qui a accès à la variable de boucle i, cette variable est pas évaluée lorsque la fonction est définie mais quand il est appelé . Mais à ce moment, la boucle est déjà terminée et i a une valeur indésirable (dans votre cas images_array.length + 1). JavaScript a seulement function scope, ne pas bloquer l'étendue.

Vous devez capturer la valeur de i par ex. en utilisant une fonction immédiate:

for (i=0;i<images_array.length;i++) { 
    drag_array[images_array[i][0]] = new Draggable(
      images_array[i][0], 
      { revert: true, 
       onEnd: (function(index) { 
         return function(){ 
          displaymessage(drag_array[images_array[index][0]]); 
         }; 
        }(i)) 
      }); 
} 

Voir aussi Closures for Dummies, l'exemple 5 et un lot of questions here on SO.