0

ページ上の要素のアニメーションをステップ実行する再帰関数があります。

_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 方向に進みます。この場合、要素は 5 ステップ右に移動し、次に 5 ステップ下に移動します。this.ythis.targY

ただし、実際には、アニメーションは 5 ステップ下がってから 5 ステップ右に移動します。まるでアニメーション キューが逆になっているようです。成功の呼び出しを削除する_this.go()と、要素は 1 ステップ右に移動して停止します。そのため、軸がどこかで混乱していないことがわかります。コンソール ログでも、正しい順序で報告されます。

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/

4

2 に答える 2