devolución de llamada de animación jquery - cómo pasar parámetros a la devolución de llamada

Question

Estoy construyendo una animación jquery de una matriz multidimensional, y en la devolución de llamada de cada iteración me gustaría usar un elemento de la matriz. Sin embargo, de alguna manera siempre termino con el último elemento de la matriz en lugar de todos los elementos diferentes.

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

}); 

}); 

`

Resultado actual: Vaca, Vaca, Vaca

resultado deseado: perro, gato, vaca

¿Cómo puedo asegurarme de que se devuelve el elemento de matriz relevante en la devolución de llamada?

Answer 1

El problema es que x se modifica cuando la devolución de llamada lo evalúa. Es necesario crear un cierre separado para ello:

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

que haya cambiado el nombre del parámetro a z aquí una aclaración, estás pasando x como argumento de la función, que devuelve una función que hace uso de la ámbito z variable, que almacena el estado de x cuando se pasa.

Answer 2

Error clásico en Javascript. Prueba esto:

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

que se asegura de que hay una variable distinta para cada función de devolución de llamada de animación creada como se ejecuta el bucle.