【转】对setTimeout的误差堆积测试和简单分析

前段时间做了一个团购秒杀倒计时的js展现的例子（ http://www.blogjava.net/dongbule/archive/2011/12/06/365687.html），倒计时的方式主要使用setTimeout的函数进行递归实现，由于是使用setTimeout，所以根据js的引擎，这其中将可能存在一定的时间误差，一个误差不要紧，两个误差无所谓，但长时间的误差堆积将出现较大的偏离值，所以根据秒杀倒计时的例子，做了一个简单的模拟的误差堆积测试，并在各个浏览器中进行测试。

鉴于秒杀倒计时都是以一秒为单位，所以下面的例子也都以1000毫秒为计算，当然各个浏览器的实现和附加代码的编写也会造成一定的时间误差，这部分误差也合并在setTimeout的实现里面计算误差。

< div  id ="show"  style ="width:500px;" ></ div >
< script >
var  w  =   1000 ;
var  second  =   0 ;
function  showtime(){    
showtime.curr =    + new  Date();    
setTimeout('showtime()', 1000 );    
document.getElementById( " show " ).innerHTML += second  + "      " + (showtime.curr - (showtime.last || showtime.curr) - 1000 ) + "     <br/> " ;    
showtime.last = showtime.curr;    
second ++ ;
}
showtime();
</ script >

可以看到在各个不同的浏览器在不同的秒数中出现不同的误差，当然这个跟我本机的浏览器和环境有关

下面再将这些误差值进行叠加测试

< div >
< div  id ="show"  style ="width:500px;" ></ div >
</ div >
< script >
var  w  =   1000 ;
var  i  =   0 ;
function  showtime(){
    showtime.curr =    + new  Date();
    f  =  setTimeout('showtime()', 1000 );
    w += (showtime.curr - (showtime.last || showtime.curr) - 1000 );
    document.getElementById( " show " ).innerHTML += i + "     " + (showtime.curr - (showtime.last || showtime.curr) - 1000 )   + "      " + w + "  

<br/> " ;
    showtime.last = showtime.curr;
    i ++ ;
}
showtime();
</ script >

IE和chrome相对较为稳定，不知道是不是我本机环境的原因，firefox出现了很多大偏差，可以选择定时清空这个误差值来处理，或是采用链式的setTimeOut()来处理。

< div  id ="show"  style ="width:300px;" ></ div >
< script >
var  w  =   1000 ;
var  i  =   0 ;
var  f ;
var  t ;
var  k  =   0 ;
function  showtime(){
    showtime.curr =    + new  Date();
    f  =  setTimeout('showtime()', 1000 );
    w += (showtime.curr - (showtime.last || showtime.curr) - 1000 );
    document.getElementById( " show " ).innerHTML += i + "     " + w + "    " + (showtime.curr - (showtime.last || showtime.curr) - 1000 )   + "     <br/> " ;
    showtime.last = showtime.curr;
    i ++ ;
}
function  round(){
     if (k != 0 ){
        clearTimeout(f);
        showtime();
        document.getElementById( " show " ).innerHTML += "   clear<br/> " ;
        w = 0 ;
    }
    setTimeout('round()', 10000 );
    k ++ ;
}
showtime();
round();
</ script >

其实为什么javascript的定时器会出现所谓的不可靠或偏差的情况，这是可以理解的，最主要的问题是它们并不是所谓的线程，其实

javascript是运行于单线程的环境中，而定时器只是计划代码在未来某个执行的时间，执行的时间点是不能被保证的，因为在页面的生命周期中，不同时间可能存在其他代码，或各个浏览器的内核控制住javascript进程。

settimeout几个见解

1、setTimeOut  !=  thread | 时间片的并发调用

2、javascript以单线程的方式运行于浏览器的javascript引擎中

3、setTimeout 只是把要执行的代码在设定的时间点插入js引擎维护的代码队列

4、setTimeout 插入代码队列并不意味着代码就会立马执行的

function showtime(){

// code 1...

f = setTimeout('showtime()',200);     //200毫秒后要插入执行代码对浏览器的js队列

// code 2...

}

以上面面的代码为例，说说它的执行流程

Code 1 -> 200毫秒后通知浏览器有队列插入   ->   Code 2   ->   showtime()  ->    …

这个种重复递归可能会造成2个问题：

1 . 时间间隔可能小于定时调用的代码的执行时间

2 . 时间间隔或许会跳过

时间间隔或许会跳过

5ms : code1 代码执行完毕，200ms后有定时器进入队列

205ms : 定时器进入队列，code2继续

300ms : function代码结束，定时器从队列中取出，执行

405ms : 第二个定时器进入队列,第一个定时器的代码在执行中

605ms : 第三个定时器意图进入队列失败，这个点的settimeout丢失

为了避免这2个问题，可以采用链式setTimeOut()进行调用

setTimeOut(function(){

code处理...

setTimeOut(arguments.callee,interval);

},interval);

这个模式链式条用setTimeOut(),每次函数执行的时候都会创建一个新的定时器，第二个setTimeOut调用使用了arguments.callee来获取当前执行的函数引用，并为其设置另外一个定时器，这样的好处在于，在前一个定时器执行完之前不会向队列中插入新的定时器代码，确保不会有任何的确实间隔，而且它可以保证在下一次定时器代码执行前，至少等待指定的间隔，避免连续的运行。

//-------------//

秒杀的定时器已经通过检测正式运行了，博客记录得不好，表达不是很清楚，关于setTimeOut的函数主要参考了《JavaScript高级程序设计(第2版)》的第18章。