Javascript 传递参数以设置回调函数的动画

我有下面的jQuery代码段，我试图将一个参数传递给animate方法的函数，但无法正确获得它

function move() {

    var points = [13, 8, 5];

    for(var pointIdx=0; pointIdx < points.length-1; pointIdx++) {
        ..
        ..

        // animate move.        
        $('#my_id', gameWindow.document).animate({ left: "50px" ,top:  "50px" }, 1500, 'linear', 
            function(pointIdx) {
                console.log("Animation: Iteration=" + pointIdx); // pointIdx is undefined at this point, why?
               ...
               ...
            }
        )
    }
}

函数移动（）{
var点=[13,8,5]；
for（var pointIdx=0；pointIdx

如何做对

---

谢谢

pointIdx

未定义，因为jQuery动画的完整回调没有任何可用参数

完成
类型：函数（）
动画完成后要调用的函数

因此，当您在animate函数中包含参数

pointIdx

时，可以像这样完成回调

function(pointIdx) {

您正在覆盖变量

pointIdx

。因为JavaScript使用一个词汇变量环境堆栈，

pointIdx

被推送到堆栈上，并带有从完整回调传入的值。此值为

未定义

，当您尝试在完整回调的执行上下文中读取变量

pointIdx

的值时，它将获取堆栈的最顶部值，即

未定义

。这就是为什么这里未定义

pointIdx

为了将

pointIdx

的值存储在此回调中，您需要将其从参数中删除，还需要使用IIFE关闭它

for(var pointIdx=0; pointIdx < points.length; pointIdx++) {
    ..
    ..

    // animate move.        
    //close over pointIdx
    (function(pointIdx){
    //now the execution context is inside of the anonymous function
    //and the value of pointIdx in the loop is stored in
    //variable pointIdx (same name for consistency) is at the top of that variable environment
    $('#my_id', gameWindow.document).animate({ left: "50px" ,top:  "50px" }, 1500, 'linear', 
        function() {
            console.log("Animation: Iteration=" + pointIdx); // pointIdx will now contain the iteration value from the for loop
           ...
           ...
        }
    )
    })(pointIdx);
}

for（var pointIdx=0；pointIdx

问题在于计时-动画回调在1500毫秒后发生，但for循环几乎立即完成。您需要像这样重写它：

var points = [13, 8, 5];
var pointIdx = 0;

function animateForPointIndex(index) {
    $('#my_id').animate({
        left: "50px",
        top: "50px"
    }, 1500, 'linear', function () {
        pointIdx++;
        if (pointIdx < points.length) {
            console.log("Animation: Iteration=" + pointIdx);
            // do what you need to here 
            animateForPointIndex(pointIdx);
        }
    });
}
animateForPointIndex(0);

var点=[13,8,5]；
var pointIdx=0；
函数animateForPointIndex（索引）{
$（“#我的id”）。设置动画({
左：“50px”，
顶部：“50px”
}，1500，“线性”，函数（）{
pointIdx++；
if（点IDX<点长度）{
log（“Animation:Iteration=“+pointIdx”）；
//在这里做你需要做的事
animateforpontindex（pointIdx）；
}
});
}
animateforpontindex（0）；

---

每次完成后，仅当点索引小于点数组的长度时，才会递归调用animate函数。

在animate函数中不需要pointIdx参数。尝试删除它。另外，您在“#my_id，gameWindow.document”中缺少一个引号。它应该是“#my_id，gameWindow.document”您是对的，但它应该是：$（“#my_id，gameWindow.document）。动画（..）那么我如何将参数传递到它的完整回调中呢？对于这个简单的情况，这是一个很好的解决方案，但是我需要“for”循环在运行动画之前进行一些计算。实际上，您有一个for循环-我的评论“在这里做您需要做的事情”是，您可以做相同的计算，因为pointIdx是迭代的。非常感谢！我建议你看看Travis J的答案——这是一个更干净的解决方案（我宁愿避免代码中的递归）和在事件之间保持状态的伟大技术。这是一个好主意，但似乎不起作用！因为动画以1500毫秒的延迟运行，所以for循环在它执行第一个动画之前就结束了。因此，最终当它执行动画3次时，'pointIdx'值在所有迭代中都等于3，而不是1,2,3。如果没有封闭函数直接调用'pointIdx'，我也可以做同样的事情。@Shvalb-不，这不是同一件事，因为函数在执行时关闭了该值。因此，当它执行动画时，它仍然是1,2,3。如果没有它，那就是当你三次都得到3。对不起，它的工作完美如预期！！不知道为什么第一次对我不起作用@Shvalb-在我之前的编辑中，其中一个变量名有一个轻微的拼写错误，IIFE参数名中的

pointIdx

被意外拼错了

pointIx

。这可能就是原因：）