7.1 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);

// 控制台输出
176
340
495
652
807
...

 

为了js里可以使用相对准确的计时功能，我们可以用setTimeout代替setInterval

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);

// 控制台输出
186
200
230
271
158
...

由于每次触发及时修正，所以没有造成误差积累