于吉吉的技术博客

建造高性能门户网

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  65 随笔 :: 6 文章 :: 149 评论 :: 0 Trackbacks

前段时间做了一个团购秒杀倒计时的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章。
posted on 2012-01-10 15:15 陈于喆 阅读(3526) 评论(6)  编辑  收藏 所属分类: web开发

评论

# re: 对setTimeout的误差堆积测试和简单分析 2012-01-10 23:00 rox
这个够专业,学习一下!  回复  更多评论
  

# re: 对setTimeout的误差堆积测试和简单分析 2012-01-11 09:06 tb
很专业啊   回复  更多评论
  

# re: 对setTimeout的误差堆积测试和简单分析 2012-01-11 09:20 HiMagic!
这个在我的博客也提到过,当页面内容较多时偏差更严重。如果只靠setTimeout的interval倒计时,而不看本地Date当前值,相差更严重。  回复  更多评论
  

# re: 对setTimeout的误差堆积测试和简单分析 2012-01-12 15:17 第一时尚网
学习了。。。谢谢博主  回复  更多评论
  

# re: 对setTimeout的误差堆积测试和简单分析 2013-09-27 20:47 购物导航
购物导航http://www.5a77.com/
不好意思呵,来推广一下自己的网站
也支持一下你的文章,写得这么好,刚好路过呵  回复  更多评论
  

# re: 对setTimeout的误差堆积测试和简单分析 2015-08-11 14:36 hirain
代码中: showtime.curr= +new Date();是什么意思,为什么要写个加号?  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: