Alternative to setInterval && setTimeout
javascript's setTimeout
and setInterval
are evil and not precise...
both have a delay of various milliseconds http://www.andrewduthie.com/post/a-self-correcting-setinterval-alternative/
both are very resource intensive as they execute several times every second.
A new alternative is requestAnimationFrame
.
it's less resourceintensive, does not slow down other stuff & it is disabled on page blur.
This makes it the perfect sobstitue for a modern setTimeout & setInterval.
So i wrote this functions:
Description
This functions use requestAnimationframe
to check if the time is passed
based on the elapsed Time calculated from Date.now
.
The time passed is more precise than the native functions & theroretically less resource intensive.
Another advantage/disadvantage(depends) is that the functions are not executed on page blur. ...
Good for: animations, visual effects
Bad for: timers, clock....
RafTimeout
window.rtimeOut=function(callback,delay){
var dateNow=Date.now,
requestAnimation=window.requestAnimationFrame,
start=dateNow(),
stop,
timeoutFunc=function(){
dateNow()-start<delay?stop||requestAnimation(timeoutFunc):callback()
};
requestAnimation(timeoutFunc);
return{
clear:function(){stop=1}
}
}
RafInterval
window.rInterval=function(callback,delay){
var dateNow=Date.now,
requestAnimation=window.requestAnimationFrame,
start=dateNow(),
stop,
intervalFunc=function(){
dateNow()-start<delay||(start+=delay,callback());
stop||requestAnimation(intervalFunc)
}
requestAnimation(intervalFunc);
return{
clear:function(){stop=1}
}
}
Usage
var interval1,timeout1;
window.onload=function(){
interval1=window.rInterval(function(){console.log('interval1')},2000);
timeout1=window.rtimeOut(function(){console.log('timeout1')},5000);
}
/* to clear
interval1.clear();
timeout1.clear();
*/
Demo
QUESTIONS
Normally i don't write functions inside functions, but in this case it's prolly a good solution. What about memory leaks if i create hundreds of this timebased functions?
Is there a better solution to clear those functions?
For heavy animations and multiple intervals,timeouts i was thinking to activate a single requestAnimationFrame loop which check for intervlas and timeouts inside a previously stored array... (but i think there should be no difference if there are just one requestAnimationframe or multiple). So how do the browsers handle those multiple requestAnimationframes?
Note:
if the code above does not work here is the original code.
window.rInterval=function(a,b){var c=Date.now,d=window.requestAnimationFrame,e=c(),f,g=function(){c()-e<b||(e+=b,a());f||d(g)};d(g);return{clear:function(){f=1}}}//callback,delay
window.rtimeOut=function(a,b){var c=Date.now,d=window.requestAnimationFrame,e=c(),f,g=function(){c()-e<b?f||d(g):a()};d(g);return{clear:function(){f=1}}}