setInterval计时器不准的问题解决方法

 更新时间:2014年05月08日 15:45:32   作者:  
在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,针对这个问题,本文有个不错的解决方案
在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害.

下面的代码可以说明这个问题
复制代码 代码如下:

var startTime = new Date().getTime();
var count = 0;
//耗时任务
setInterval(function(){
var i = 0;
while(i++ < 100000000);
}, 0);
setInterval(function(){
count++;
console.log(new Date().getTime() - (startTime + count * 1000));
}, 1000);

代码里输出了setInterval触发时间和应该正确触发时间的延迟毫秒数
复制代码 代码如下:

176
340
495
652
807
961
1114
1268
1425
1579
1734
1888
2048
2201
2357
2521
2679
2834
2996
......

可以看到延迟是越来越严重的.

为了在js里可以使用相对准确的计时功能,我们可以
复制代码 代码如下:

var startTime = new Date().getTime();
var count = 0;
setInterval(function(){
var i = 0;
while(i++ < 100000000);
}, 0);
function fixed() {
count++;
var offset = new Date().getTime() - (startTime + count * 1000);
var nextTime = 1000 - offset;
if (nextTime < 0) nextTime = 0;
setTimeout(fixed, nextTime);

console.log(new Date().getTime() - (startTime + count * 1000));
}
setTimeout(fixed, 1000);

代码里,通过1000(也就是周期时间)减去当前时间和准确时间的差距,来算出下次触发的时间,从而修正了当前触发的延迟.

下面是输出
复制代码 代码如下:

186
200
230
271
158
899
900
899
900
899
899
899
902
899
418
202
232
266
145
174
192
214
242
268
149
179
214
......

可以看到虽然触发时间并非绝对准确,但由于每次触发都进行及时修正,所以并没有造成误差积累.

相关文章

  • Ucren Virtual Desktop V2.0

    Ucren Virtual Desktop V2.0

    Ucren Virtual Desktop V2.0...
    2006-11-11
  • 初学js插入节点appendChild insertBefore使用方法

    初学js插入节点appendChild insertBefore使用方法

    由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
    2011-07-07
  • JS实现点击上移下移LI行数据的方法

    JS实现点击上移下移LI行数据的方法

    这篇文章主要介绍了JS实现点击上移下移LI行数据的方法,涉及javascript针对LI列表动态排序的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 用javascript取得传递参数的个数的代码

    用javascript取得传递参数的个数的代码

    用javascript取得传递参数的个数的代码...
    2007-10-10
  • JS ES6展开运算符的几个妙用

    JS ES6展开运算符的几个妙用

    这篇文章主要介绍了JS ES6展开运算符的几个妙用,想了解ES6的同学,可以参考下
    2021-04-04
  • 浅谈js闭包理解

    浅谈js闭包理解

    这篇文章主要介绍了对js闭包理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • javascript parseInt与Number函数的区别

    javascript parseInt与Number函数的区别

    在js中,如果你使用parseInt("08"),一般都会认为会返回8,然而实际上返回了0.但是用Number("08")返回的才是8.
    2010-01-01
  • js如何实现元素曝光上报

    js如何实现元素曝光上报

    这篇文章主要介绍了js如何实现元素曝光上报,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript中的16进制字符介绍

    JavaScript中的16进制字符介绍

    最早接触到\unnn之类的字符是在微软的官网上。当时在网上找了一下这中字符格式,却不知道该搜什么
    2011-10-10
  • JS验证身份证有效性示例

    JS验证身份证有效性示例

    身份证有效性验证的方法有很多,在本文将为大家介绍下如何使用js简单实现下,感兴趣的朋友可以参考下
    2013-10-10

最新评论