Popular posts

It is called once on every tick (~17ms). The caller function has to call itself:

var startTime = undefined,
      currentFrame = undefined;
function some(t){
     startTime  = startTime || t;
    //do something
    currentFrame = window.requestAnimationFrame(some);
}

some();//every ~17ms some will be called.

The function gets called every 17ms. It has a separate microtask queue. To terminate the function either use window.cancelAnimationFrame on the currentFrame, or "return" before calling itself again.

It is mainly used for animation, but I use it everywhere as an alternative to good old setTimeout/interval because rAF(requestAnimationFrame) is aware if the browser is minimized or not, therefore it will not stack unnecessary calls. Some examples from my very very old experiments:

i-pv.org/triangle.html

i-pv.org/sample.html

I recently used it as a fallback to promise API when the browser does not support it:

github.com/IbrahimTanyalcin/taskq

I also do use it a lot in events that are fired very rapidly, such as scrolling. I use it to throttle the function. It is a rabbit hole and there are many use cases, for some snippets refer here: ieeexplore.ieee.org/document/8291800