**Alternative to `setInterval` and `setTimeout`**

JavaScript's `setTimeout` and `setInterval` are evil and not precise...

1. both have a delay of various milliseconds
http://www.andrewduthie.com/post/a-self-correcting-setinterval-alternative/

2. both are very resource intensive as they execute several times every second.

A new alternative is `requestAnimationFrame`.
it's less resource=intensive, does not slow down other stuff and it is disabled on page blur.

*This makes it the perfect substitute for a modern `setTimeout` and `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 and theoretically 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**

http://jsfiddle.net/wZ9Z6/


**QUESTIONS**

1. Normally I don't write functions inside functions, but in this case it's probably a good solution. What about memory leaks if I create hundreds of this time-based functions?

2. Is there a better solution to clear those functions?

3. For heavy animations and multiple intervals, timeouts I was thinking to activate a single `requestAnimationFrame` loop which check for intervals 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}}}


----------


**EDIT 1: New version with namespace & single raF**

1. Custom Namespace 
2. one Single raF controls all timers
3. the timer index is reset to 0
4. every resource-intensive function or nested variable is cached
5. all functions are just references
6. theoretically the max delay is 17ms
7. uses bitwise & short hand operators to increase performance


> I tested 10000 timers in 5sec and it worked without slowdown.
> 
> The loop run at stable 17ms==60fps==60HZ.
> 
> And The maximum delay was around 10ms.


    ;(function(ns){
    
     var index=0, // increases or uid until there are no more timers then set to 0
         timers=[], // contains all timers
         L=0, // static timers.length (increases performance)
         now=Date.now, // shortcut
         raf=window.requestAnimationFrame, // shortcut
         test=0; // variable to calculate the average update time in ms
    
     function globalTimer(){ // the global timing function
      var l=L,n=now(),t;
      l>0?raf(globalTimer):
      (
       index=0,
       test=0,
       console.log(
        'Stopping Global Timer and Setting Global Index To '+
        index+', also test to '+test
       )
      );
      while(l--){
       t=timers[l];//t=[index,callback,delay,offset,startTime]
       n-t[3]<t[2]||
       (
        //t[3]+=t[2], // this is for the setInterval function
        t[1](),
        timers.splice(l,1),
        L=timers.length,
        console.log([
         'Delay Set: ',t[2],
         ' - Time Passed: ',n-t[4],
         ' - Update every: ',(n-t[4])/test,'ms'
        ].join(''))
       );
      }
      test++
     }
    
     ns.setTimeout=function(cb,delay){
      var i=index++,n=now();
      L||(raf(globalTimer),console.log('Executing Global Timer'));
      L=timers.push([i,cb,delay,n,n]);
      return i
     }
    
     ns.clearTimeout=function(i){
      var l=L;
      while(l--){
       timers[l][0]!=i||(timers.splice(l,1))
      }
     }
    
     /*ns.setInterval=function(callback,delay){...}
     ns.clearInterval=function(callback,delay){...}*/
    
    }(this.Timers=this.Timers||{}));


**Usage**

    var T1=Timers.setTimeout(function(){console.log('new timer')},3000);
    Timers.clearTimeout(T1);

So basically i tried to put less possible calculations inside the globaltimer function.
even if i could put the cleartimeout index check inside the globaltimer i created a distinct while loop.but i'm not shure if it's better or not.(atm i'm thinking of some sort of indexof...)