将参数传递给动画回调函数

Question

我有以下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?
               ...
               ...
            }
        )
    }
}

怎么做对？

谢谢！

Answer 1

由于对jQuery动画的完整回调没有可用的任何参数，因此未定义pointIdx 。

http://api.jquery.com/animate/

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

因此，当您在动画函数中包含参数pointIdx ，像这样完成回调

function(pointIdx) {

您正在覆盖变量pointIdx 。 由于JavaScript使用了一系列词法变量环境，因此pointIdx会使用从完整回调中传入的值压入堆栈。 该值是undefined ，当您尝试在完整回调的执行上下文中读取变量pointIdx的值时，它将获得堆栈中最高的值，即undefined 。 这就是为什么在此处未定义pointIdx原因。

为了将pointIdx的值存储在此回调中，您需要将其从参数中删除，并且还需要使用IIFE将其关闭。

jsFiddle Demo

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

Answer 2

问题在于时间安排-动画回调在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);

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