자바 스크립트는 - '이것은'에서는 setTimeout 및 requestAnimationFrame

Question

안에 내 질문은 다음과 관련이있다 : 나는 간단한 애니메이션 루프를 구현하기 위해 노력하고있어

setTimeout() inside JavaScript Class using “this”

calling a function inside setTimeout and inside a function

. draw 함수는 상태 객체의 멤버 함수입니다. setTimeout 및 requestAnimationFrame 내에서 'this'가 작동하는 데 문제가 있습니다. 내가) (플레이를 호출 할 때

ANIM.State.prototype = { 
    constructor: ANIM.State, 
    play: function(){ 
     if(!this.paused){ 
      var that = this; 
      setTimeout(function(){ 
       requestAnimationFrame(that.play); 
       that.setFrameNum(that.currentFrame + 1); //draw code is in here 
      }, 1000/24); 
     } 
    } 
}; 

는 그러나, 두 번 실행 중지 :

나는 다음과 같은 코드가 있습니다.

더 좋은 방법이 있나요? 가능하다면이 함수를 클래스 함수로 유지하고 전역 함수로 유지하고 싶습니다.

Answer 1

당신은이 같은 .bind()으로 문제를 해결할 수 있습니다

requestAnimationFrame(that.play.bind(that)); 

을 문제는 모두가 requestAnimationFrame()에 전달되는 것은 .play 방법에 대한 참조이며 다음 그래서 this 내부의 일반 함수 호출로 실행됩니다 그것은 틀릴 것이고 당신의 물건을 가리 키지 않을 것입니다. obj.method()이라는 메서드를 콜백으로 전달할 때 일반적인 문제입니다.

여러 가지 가능한 해결 방법이 있지만 최신 브라우저 중 가장 쉬운 방법은 위에 표시된대로 .bind()을 사용하는 것입니다. 이것은 실제로 play()이 아닌 that.play()을 호출하는 작은 스텁 함수를 생성하므로 객체 참조가 필요에 따라 사용되고 그 스텁 함수는 requestAnimationFrame()으로 전달됩니다.

는 또한 (자신의 스텁 함수를 만드는)과 같이 그것을 할 수

, .bind()하지만 나에게 청소기 보인다

requestAnimationFrame(function() { 
    that.play(); 
});