requestAnimationFrame에 의해 setInterval을 대체하는 방법

Question

여기 내 상황이 있습니다. 실행 시간을 단축해야하기 때문에 setInterval은 현명한 선택이 아닙니다. 맞습니까? 매 시간마다 적어도 4ms의 비용이 듭니다.

그래서 setInterval 함수를 requestAnimationFrame으로 변경할 수는 있지만 requestAnimationFrame이 어떻게 작동하는지 이해하지 못합니다. 예를

// some code here 
var interval = setInterval(doSomething, 10) 
var progress = 0 
function doSomething(){ 
    if (progress != 100){ 
     // do some thing here 
    }else{ 
     clearInterval(interval) 
    } 
} 

내가 requestAnimationFrame 방법을 적용 할 수 있습니다 들어

?

Answer 1

는 바이올린에 더 나은 보이는 ->just the code,no animation

모든 일을하여 setInterval을 사용 simplification.No 필요에 대한 코드 내부에 주석. 간격을 지우려면 cancelAnimationFrame을 사용하십시오.

// This makes sure that there is a method to request a callback to update the graphics for next frame 

var requestAnimationFrame = 
     window.requestAnimationFrame ||  // According to the standard 
     window.mozRequestAnimationFrame || // For mozilla 
     window.webkitRequestAnimationFrame || // For webkit 
     window.msRequestAnimationFrame ||  // For ie 
     function (f) { window.setTimeout(function() { f(Date.now()); }, 1000/60); }; // If everthing else fails 

var cancelAnimationFrame = 
     window.cancelAnimationFrame || 
     window.mozCancelAnimationFrame || 
     window.webkitCancelAnimationFrame || 
     window.msCancelAnimationFrame; 

// your code here 

var progress = 0; 

function doSomething() { 
    if (progress != 100) { 
     // do something here 
     var myAnimation = requestAnimationFrame(doSomething); 
    } else { 
     // don't use clearInterval(interval) instead when you know that animation is completed use cancelAnimationFrame() 
     cancelAnimationFrame(myAnimation); 
    }   
} 

일부 링크 가치가 읽기 ->

1. CreativeJs---the best explanation any one could give,Every begineer must read
2. CancelAnimationFrame
3. link 3-->in context of your question
4. I found this fiddle on google,quite the same that you want.

다른 것들을 당신이해야 알아 :

• RAF는 아직 개발 단계에 있습니다.
• Why doesn't jQuery use requestAnimationFrame?