It is called once on every tick (~17ms). The caller function has to call itself:
var startTime = undefined,
currentFrame = undefined;
functionsome(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 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
Thanks for your response. How do I know how many seconds once the function gets called? Does requestAnimationFrame support CSS animation as well? Applying CSS animation by applying classname using JavaScript.
the counter variable after one second should be around 60. That is the refresh rate of many monitors.
requestAnimationFrame is a function microtask queue, it has nothing to do with css animations. But you can combine rAF and css animations. For instance, you call a function to trigger a css animaton inside rAF, and then when "t" is larger than 1000(ms) than trigger the next one etc.
Ibrahim Tanyalcin
{intrst:"Scnc&Art",msc:"admin@MutaFrame",strive:"Experiment&Learn",loves:"ES5",hates:"bandwagon",lang:"Javascript",twttr:"@ibrhmTanyalcin"}
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