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触发时间和应该正确触发时间的延迟毫秒数

复制代码代码如下:

 



















...... 

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

为了在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(也就是周期时间)减去当前时间和准确时间的差距,来算出下次触发的时间,从而修正了当前触发的延迟.

下面是输出

复制代码代码如下:

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

原生微信小程序开发中 redux 的使用详解
这篇文章主要介绍了原生微信小程序开发中 redux 的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
js数据类型转换与流程控制操作实例分析
这篇文章主要介绍了js数据类型转换与流程控制操作,结合实例形式分析了JavaScript数据类型转换与流程控制相关原理、操作技巧与使用注意事项,需要的朋友可以参考下
2019-12-12
6种JavaScript继承方式及优缺点(小结)
这篇文章主要介绍了6种JavaScript继承方式及优缺点(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
js实现星星打分效果的方法
这篇文章主要介绍了js实现星星打分效果的方法，涉及javascript操作页面元素与样式的技巧，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-04-04
JavaScript JSON使用原理及注意事项
这篇文章主要介绍了JavaScript JSON使用原理及注意事项,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
这篇文章主要介绍了JS变量中有var定义和无var定义的区别以及es6中let命令和const命令,需要的朋友可以参考下
2017-02-02
JavaScript setTimeout和setInterval的用法与区别详解
Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,下面这篇文章主要给大家介绍了关于JavaScript setTimeout和setInterval的用法与区别,需要的朋友可以参考下
2022-04-04
javascript中tostring()和valueof()的用法及两者的区别
基本上，所有JS数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决javascript值运算与显示的问题，本文给大家介绍javascript中tostring()和valueof()的用法及两者的区别，对js tostring valueof相关知识感兴趣的朋友一起学习吧
2015-11-11
javascript smipleChart 简单图标类
支持线性图区域图柱状图饼图支持多浏览器用到的是svg vml 之后加上多层饼图分段图和组合图
2011-01-01
JS运动特效之完美运动框架实例分析
这篇文章主要介绍了JS运动特效之完美运动框架,结合实例形式分析了javascript针对运动中的元素属性检测与判断相关操作技巧,需要的朋友可以参考下
2018-01-01