setTimeout的误差堆积测试和分析

前段时间做了一个团购秒杀倒计时的js展现的例子(http://www.blogjava.net/dongbule/archive/2011/12/06/365687.html),倒计时的方式主要使用setTimeout的函数进行递归实现,由于是使用setTimeout,所以根据js的引擎,这其中将可能存在一定的时间误差,一个误差不要紧,两个误差无所谓,但长时间的误差堆积将出现较大的偏离值,所以根据秒杀倒计时的例子,做了一个简单的模拟的误差堆积测试,并在各个浏览器中进行测试。
鉴于秒杀倒计时都是以一秒为单位,所以下面的例子也都以1000毫秒为计算,当然各个浏览器的实现和附加代码的编写也会造成一定的时间误差,这部分误差也合并在setTimeout的实现里面计算误差。

成都创新互联2013年至今,是专业互联网技术服务公司,拥有项目成都做网站、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元兴国做网站,已为上家服务,为兴国各地企业和个人服务,联系电话:028-86922220

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

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

     
     
     
     
    1.  
     
  •  
  •  
  •  

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

     
     
     
     
    1.  
    2.  

    其实为什么javascript的定时器会出现所谓的不可靠或偏差的情况,这是可以理解的,最主要的问题是它们并不是所谓的线程,其实
    javascript是运行于单线程的环境中,而定时器只是计划代码在未来某个执行的时间,执行的时间点是不能被保证的,因为在页面的生命周期中,不同时间可能存在其他代码,或各个浏览器的内核控制住javascript进程。

    settimeout几个见解

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

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

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

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

     
     
     
     
    1. function showtime(){  
    2. // code 1...  
    3. f = setTimeout('showtime()',200); //200毫秒后要插入执行代码对浏览器的js队列  
    4. // code 2...  

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

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

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

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

    2 . 时间间隔或许会跳过

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

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

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

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

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

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

     
     
     
     
    1. setTimeOut(function(){  
    2. code处理...  
    3. setTimeOut(arguments.callee,interval);  
    4. },interval); 

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

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

    网页标题:setTimeout的误差堆积测试和分析
    当前链接:http://www.csdahua.cn/qtweb/news32/549932.html

    网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网

    成都快上网为您推荐相关内容

    电子商务知识

    各行业网站