深入理解javascript定时器

浏览器中的所有Javascript代码都是在单线程中执行的，处理程序在执行时必须进行排队执行，并且一个处理程序并不能中断另外一个处理程序的执行。所以，Javascript定时器的延迟时间是不能保证的。

 

有两种创建重复定时器的方式，他们之间是有差异的。

setTimeout(function repeatMe(){

         /*其它很长的代码*/

         setTimeout(repeatMe,10);

},10);

 

setInterval(function(){

         /*其它很长的代码*/

},10);

 

在setTimeout()代码中，要在前一个callback回调执行结束并延迟10毫秒（可能更多，但不会更少）以后，才能再次执行setTimeout()。

 

而setInterval()则是每隔10毫秒就尝试执行callback回调，它不关注上一个callback是何时执行的，interval间隔定时器可能会无限延迟执行，并且同一个interval处理程序的多个实例不能同时进行排队（如果已经有一个interval实例在排队并等待执行，那么这一次的调用将被废弃）。

 

在处理大量数据的时候，一段代码一直在执行，就会产生卡顿或者不响应。我们可以用定时器来解决，把强循环和操作转化为非阻塞操作。方法就是用定时器把任务分解，而不是一次执行完。

 

在处理动画时，可能会出现大量的定时器，这时需要使用中央定时器进行管理，保证每个页面在同一时间内只需要运行一个定时器，而且可以根据需要暂停和恢复定时器。

var timers = {
 
timerId : 0,
timers : [],
 
add : function(fn){
         this.timers.push(fn);
},
 
start : function(){
         if(this.timerId)return;
         (function runNext(){
                   if(timers.timers.length>0){
                            for(var i=0;i<timers.timers.length; i++){
                                     if(timers.timers[i]()=== false){
                                               timers.timers.splice(i,1);
                                               i--;
				    }
                            }
                     timers.timerId =setTimeout(runNext,0);
                  }
          })();
},
 
stop : function(){
      clearTimeout(this.timerId);
      this.timerId =0;
}
 
};

使用方法：

timers.add(function(){

         box.style.left= x + ‘px’;

         if(++x > 50 ) return false;

});

timers.add(function(){

         box.style.top= y + ‘px’;

         y+= 2;

         if(y > 120 ) return false;

});

 

timers.start();