jquery动画回调 - 如何将参数传递给回调

Question

我从一个多维数组构建jquery动画，并且在每次迭代的回调中，我想使用数组的一个元素。然而，不知何故，我总是以数组的最后一个元素而不是所有不同的元素结束。

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

}); 

}); 

`

当前的结果：牛，牛，牛

期望的结果：狗，猫，牛

如何确保相关数组元素在回调中返回？

Answer 1

问题是x在回调评估它时被修改。您需要创建一个单独的关闭它：

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

我已经改名为参数z这里澄清，你传递x作为参数传递给函数，它返回一个函数，它利用了范围为z变量，它在传递时存储x的状态。

Answer 2

Javascript中的经典错误。试试这个：

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

这可确保有一个为作为循环执行创建的每个动画回调职能的变量。