how to replace setInterval by requestAnimationFrame

Question

Here is my situation, I need to speed up the function running time, so setInterval is not a wise choose, right? Since it will cost at least 4ms for each time.

So, may I change setInterval function to requestAnimationFrame, but I don't quite understand how the requestAnimationFrame works.

For example

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

and how can I apply requestAnimationFrame?

I'm not sure what you mean by "need to speed up the function running time". `requestAnimationFrame` is useful for *animations* - that is, when you want your animation draw cycles to synchronize with the actual screen redrawing (which is slower). — voithos, Jul 17 '13 at 18:37
@voithos actually, the function take almost 1 min to draw something on the page, and if I set the function into a interval field, it will cost much more time. I just wondering does requestAnimationFrame help? — Kimmi, Jul 17 '13 at 18:40
What do you mean by animating? draw the progress is a kind of animation right? Here is the example: http://jsfiddle.net/jin_hw/2NP9Q/ — Kimmi, Jul 17 '13 at 18:55

score 0 · Answer 1 · answered Feb 25 '20 at 19:35

I think the key to understand requestAnimationFrame lies in paul Irish's explanation:

Any rAFs queued in a rAF will be executed in the next frame

from requestAnimationFrame Scheduling For Nerds

var rafReference;
var progress = 0;

function doSomething(){
   // only run 100 times
   if (progress < 100){

       /* do what you wanna do here */

       progress++; 
       //recursively calls it self as requestAnimationFrame's callback
       rafReference = requestAnimationFrame(doSomething) // passed as reference
   }else{
       cancelAnimationFrame(rafReference)
   }
}
//starting the recursion
requestAnimationFrame(doSomething)

score -1 · Answer 2 · edited May 23 '17 at 12:00

Looks better in a fiddle-->just the code,no animation

Every thing is commented inside the code for simplification.No need of using setInterval. Just use cancelAnimationFrame when we are suppose to clear interval.

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

Some Links worth a read-->

Other things that you should know:

RAF is still in the development stage.
Why doesn't jQuery use requestAnimationFrame?

how to replace setInterval by requestAnimationFrame

2 Answers2

Linked