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

});

});

当前结果：Cow，Cow，Cow

期望结果：Dog，Cat，Cow

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

- Hans

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作为函数的参数传递，该函数返回一个利用作用域中存储x状态的z变量的函数。

- Andy E

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

这确保了在循环执行时为每个动画回调函数创建一个独立的变量。

- Pointy