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

Posted 2023-05-08

【中文标题】jquery动画回调 - 如何将参数传递给回调

【英文标题】：jquery animation callback - how to pass parameters to callback

【发布时间】：2011-02-02 12:28:57

【问题描述】：

我正在从一个多维数组构建一个 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]);
    );


);

);

`

当前结果：牛，牛，牛

想要的结果：狗、猫、牛

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

【参考方案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 当它通过时。

【参考方案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);

这样可以确保循环执行时创建的每个动画回调函数都有一个不同的变量。