jquery animation callback - wie man Parameter an callback übergibt

Question

Ich baue eine jquery-Animation aus einem mehrdimensionalen Array, und im Callback jeder Iteration möchte ich ein Element des Arrays verwenden. Irgendwie aber habe ich immer das letzte Element des Arrays anstelle aller verschiedenen Elemente.

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]); 
    }); 
} 

}); 

}); 

`

Aktuelles Ergebnis: Kuh, Kuh, Kuh

Wunschergebnis: Hund, Katze, Kuh

Wie kann ich sicherstellen, dass das relevante Array-Element im Callback zurückgegeben wird?

Answer 1

Das Problem ist, dass x geändert wird, bis der Rückruf es auswertet. Sie benötigen eine separate Verschluss für sie zu schaffen:

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)); 
} 

ich den Parameter auf z zur Klärung hier umbenannt haben, können Sie x als Argument an die Funktion übergeben, die eine Funktion zurückgibt, die Verwendung der Marken Bereich z Variable, die den Zustand x speichert, wenn es übergeben wird.

Answer 2

Klassischer Fehler in Javascript. Versuchen Sie folgendes:

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

, der sicherstellt, dass es für jede Animation Callback-Funktion erstellt, wie die Schleife ausgeführt eine deutliche Variable ist.