Question

我有一个递归功能，可以在页面上踩一个元素的动画：

_this = this;
this.x = 0, this.y = 0;
this.targX = 5, this.targY = 5; 

this.go = function(){
    var xDir = 0, yDir = 0, finished = false;

    if(this.x>this.targX){
        console.log("Reverse x");
        xDir = -1;
    }else if(this.x<this.targX){
        console.log("Forward x");
        xDir = 1;
    }else{
        xDir = 0;
        if(this.y>this.targY){
            console.log("Reverse y");
            yDir = -1;
        }else if(this.y<this.targY){
            console.log("Forward y");
            yDir = 1;
        }else{  finished = true;  }
    }
    this.x+= xDir;
    this.y+= yDir;

    if(finished==false){
        this.$c.animate({
            left: "+="+32*xDir,
            top: "+="+32*yDir
        }, 200, _this.go());
    }
}

希望从代码中可以清楚地看到这一点，但动画应该先朝x方向迈步，直到this.x = this.targX，然后沿y方向前进，直到this.y为止。 = this.targY。在这种情况下，元素向右走5步，然后向下走5步。

然而，在实践中，动画向下5步然后向右5步 - 就好像动画队列被反转一样。如果我在成功时删除了_this.go()调用，则该元素向右移动一步并停止 - 所以我知道我不会让我的轴在某处混淆。控制台甚至以正确的顺序记录报告：

Forward x
Forward x
Forward x
Forward x
Forward x
Forward y
Forward y
Forward y
Forward y
Forward y

这里发生了什么，为什么动画队列反向执行？我做错了什么，或者这是JQuery的预期行为？

编辑：在这里摆弄：http://jsfiddle.net/WdYvB/

Answer 1

写作：

this.$c.animate({
    left: "+=" + 32 * xDir,
    top: "+=" + 32 * yDir
}, 200, _this.go());

您实际上正在调用go()并将其返回的值（在我们的案例中为undefined）传递给animate()。

您应该自行传递函数：

this.$c.animate({
    left: "+=" + 32 * xDir,
    top: "+=" + 32 * yDir
}, 200, _this.go);

Answer 2

在分配回调时，正在调用您的回调函数。

  if(finished==false){
        this.$c.animate({
            left: "+="+32*xDir,
            top: "+="+32*yDir
        }, 200, _this.go());  // should be _this.go 
    }

JQuery动画队列以相反的顺序执行？

2 个答案: