자바 스크립트 객체 내부에서 requestAnimationFrame 호출하기

Question

나는 이것을 알아 내려고 벽에 부딪쳤다. 나는 OO Javascript에 익숙하지 않고 첫 번째 클래스/객체를 조합하려고합니다. 캔버스 로더를 만들려고하는데 작동하지 않습니다. 내 클럭 클래스에서 내 animate 함수 내부 requestAnimationWindow 부분에 오류를 좁혔습니다. 나는 객체 [객체 전역]에 '애니메이션'오류가 없다는 것을 알았습니다. 여기 내 코드가있다.

HTML :

<div id="loader"><canvas id="showLoader" width="250" height="250"></canvas><div id="showTimer"><p id="elapsedTime"> 
    <script> 
    var clockTest = new clock(document.getElementById("showLoader"), 0, 100); 
    clockTest.animate(); 
    </script> 

</p></div></div> 

자바 스크립트 :

function clock(canvas, curPerc, endPrecent){ 

var showPerc = document.getElementById("elapsedTime"); 
this.canvas = document.getElementById("showLoader"); 

var context = this.canvas.getContext('2d'); 
var x = this.canvas.width/2; 
var y = this.canvas.height/2; 
var radius = 75; 
this.curPerc = 0; 
this.endPercent = 110; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 


context.lineWidth = 10; 
context.strokeStyle = '#ed3f36'; 


this.animate = function(current) { 

    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    this.context.beginPath(); 
    this.context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    this.context.stroke(); 
    this.curPerc++; 

    if(this.curPerc < this.endPercent) { 
     requestAnimationFrame(function() { 
      this.animate(curPerc/100); 
      showPerc.innerHTML = this.curPerc + '%'; 
     }); 
    } 
}; 

}

모든 팁은 감사합니다. 감사!

Answer 1

당신이 생각하는 this이 아닌 requestAnimationFrame에 전달하는 익명 함수에서이 컨텍스트와 관련이 있습니다. 다른 점 몇 가지에 폐쇄 즉

this.animate = function(current) { 
    var self = this; //<-- Create a reference to the this you want 
    self.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    /.. etc, etc.. 

    if(self.curPerc < self.endPercent) { 
     requestAnimationFrame(function() { 
      self.animate(self.curPerc/100); //<-- and use it here 
      showPerc.innerHTML = self.curPerc + '%'; //<-- and here 
     }); 
    } 
}; 

를 사용하여, 나는 조금 더 오브젝트를 구성하려고 할 것입니다, 당신은 제대로 특성에 대한 참조를 유지하는 것 같지 않습니다. 전달한 매개 변수는 객체에 저장되지 않으며 컨텍스트를 올바르게 저장하지 않습니다. 다음과 같이합니다.

function clock(canvas, curPerc, endPrecent) { 
    var self = this; 
    // Set object properties here, i.e. from the parameters passed in 
    // Note also, anything that is a property (i.e. this.) is public, can be accessed from otuside this object, 
    // whereas variable declared with var , are privte, can only be access within this object 
    self.canvas = canvas; 
    self.curPerc = curPerc; 
    self.endPercent = endPrecent; 
    self.context = self.canvas.getContext('2d'); //needs to be store like this, if you want to access below as this.context 
    self.context.lineWidth = 10; 
    self.context.strokeStyle = '#ed3f36'; 

    //Private variables 
    var showPerc = document.getElementById("elapsedTime"); 
    var x = self.canvas.width/2; 
    var y = self.canvas.height/2; 
    var radius = 75; 
    var counterClockwise = false; 
    var circ = Math.PI * 2; 
    var quart = Math.PI/2; 

    //Methods 
    self.animate = function (current) { 
     self.context.clearRect(0, 0, self.canvas.width, self.canvas.height); 
     self.context.beginPath(); 
     self.context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
     self.context.stroke(); 
     self.curPerc++; 

     if (self.curPerc < self.endPercent) { 
      requestAnimationFrame(function() { 
       self.animate(curPerc/100); 
       showPerc.innerHTML = self.curPerc + '%'; 
      }); 
     } 
    }; 
} 

이 더 좋은 방향으로 가고 있습니다.