2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

解决setInterval计时器不准的问题

时间:12-11来源:作者:点击数:17
城东书院 www.cdsy.xyz

在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
  • ......

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

城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐