역순으로 실행되는 JQuery 애니메이션 대기열?

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

는 희망이 코드에서 분명하다,하지만 애니메이션은 this.x 때까지 먼저 x 방향 단계로되어있다 = this.targX 인 다음 y 방향으로 이동하여 this.y = this.targY이 될 때까지 진행합니다. 이 경우 요소는 5 단계 오른쪽으로 이동 한 다음 5 단계로 이동합니다.

그러나 실제로 애니메이션은 애니메이션 대기열이 반대로 전환되는 것처럼 5 단계에서 5 단계 오른쪽으로 이동합니다. 성공시 _this.go() 호출을 제거하면 요소가 한 단계 올라가고 멈 춥니 다 - 그래서 나는 어딘가에서 내 축을 혼동하지 않는다는 것을 압니다. 콘솔 로깅도 올바른 순서로보고합니다.

왜 여기에서 애니메이션 대기열이 역순으로 실행됩니까? 뭔가 잘못된 일을하고 있습니까? 아니면 JQuery에서 예상되는 동작입니까?

---

편집 : 여기 바이올린은 : 당신이 콜백을 할당 할 때 http://jsfiddle.net/WdYvB/

Answer 1

: 당신은 실제로 go()를 호출하고 animate()에 (우리의 경우 undefined)가 반환하는 값을 전달하고

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

.

대신 함수 자체를 통과해야합니다

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 
    }