jquery animazione callback - come passare parametri al callback

Question

Sto costruire un'animazione jquery da una matrice multidimensionale, e nella callback di ogni iterazione vorrei utilizzare un elemento della matrice. Comunque in qualche modo finisco sempre con l'ultimo elemento dell'array invece di tutti gli elementi diversi.

html:

<div id="square" style="background-color: #33ff33; width: 100px; height: 100px; position: absolute; left: 100px;"></div>

javascript:

$(document).ready(function() { 

// Array with Label, Left pixels and Animation Lenght (ms) 
LoopArr = new Array(
    new Array(['Dog', 50, 500]), 
    new Array(['Cat', 150, 5000]), 
    new Array(['Cow', 200, 1500]) 
); 

$('#square').click(function() { 

for (x in LoopArr) { 
    $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], function() { 
     alert (LoopArr[x][0][0]); 
    }); 
} 

}); 

}); 

`

risultato attuale: mucca, Vacca, Vacca

risultato desiderato: Cane, Gatto, Vacca

Come posso essere sicuro che l'elemento di matrice pertinente sia restituito nel callback?

Answer 1

Il problema è che x viene modificato dal momento in cui il callback lo valuta. È necessario creare una chiusura separata per esso:

for (x in LoopArr) { 
    $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], 
     (function (z) { 
     return function() { 
      alert (LoopArr[z][0][0]); 
     } 
    })(x)); 
} 

ho rinominato il parametro da z qui per chiarimenti, si sta passando x come argomento alla funzione, che restituisce una funzione che fa uso del scope z variabile, che memorizza lo stato di x quando viene passato.

Answer 2

errore classico in Javascript. Prova questo:

for (x in LoopArr) { 
    (function(x) { 
     $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], function() { 
     alert (LoopArr[x][0][0]); 
     }); 
    })(x); 
} 

Questo fa in modo che ci sia una variabile distinta per ogni funzione di callback di animazione creata come il ciclo viene eseguito.