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

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

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

<强>完整
  类型：功能（）
  动画完成后调用的函数。

因此，当你在animate函数中包含参数pointIdx完成回调时，就像这样

function(pointIdx) {

您覆盖变量pointIdx。因为JavaScript使用一堆词法变量环境，所以pointIdx会被推送到堆栈，并从完整回调传入值。此值为undefined，当您尝试在完整回调的执行上下文中读取变量pointIdx的值时，它将获取堆栈的最高值，即{{1 }}。这就是undefined在这里未定义的原因。

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

<强> jsFiddle Demo

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

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

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

2 个答案: