JS - setTimeout时间误差解决办法

JS - setTimeout时间误差解决办法

一、背景

最近项目中加了一个计时器，我是用setTimeout来实现计时的，用于显示订单剩余支付时间，但我发现，短时间还好，时间长了，计时器的误差会很大。

二、问题

1. 用setTimeout实现计时

var start = new Date().getTime() 
var count = 0 // 程序执行了秒数 增加
var inits = 1000 // 间隔时间
var timer = setTimeout(fun,inits)
console.log("start",start);
function fun(){
 	count ++
    // 当前时间 - (开始时间+过程时间) => 如果为0，没有误差；大于0，有误差
    var errorTime = new Date().getTime() - (start + count*1000) + "ms"
    console.log(errorTime);
    if(count < 10){
      	timer = setTimeout(fun,inits)
    }
}

三、分析

setInterval、setTimeout实现都会出现误差，这源于js的单线程。
他们的回调函数并不是到时后立即执行，而是等系统计算资源空闲下来后才会执行。
setInterval、setTimeout都属于宏任务。

四、模拟阻塞事件

现在来模拟一下，加一些阻塞线程的代码试试

// 阻塞代码
setInterval(function(){
    var n = 0
    while(n++ <= 1000000000);
},1000)

var start = new Date().getTime() 
var count = 0 // 程序执行了秒数 增加
var inits = 1000 // 间隔时间
var timer = setTimeout(fun,inits)
console.log("start",start);
function fun(){
 	count ++
    // 当前时间 - (开始时间+过程时间) => 如果为0，没有误差；大于0，有误差
    var errorTime = new Date().getTime() - (start + count*1000) + "ms"
    console.log(errorTime);
    if(count < 10){
      	timer = setTimeout(fun,inits)
    }
}

可以看到加了一些阻塞线程的代码后，误差越来越严重，
在实际项目中，执行计时器的同时，会有很多其他异步阻塞事件，会导致倒计时功能不精确。

五、解决方案

我们需要进行误差修正，也就是获取到误差的值，并且根据这个误差值来动态调整我们执行回调的间隔时间

1. 计算误差值
2. 动态调整执行setTimeout的间隔

var start = new Date().getTime()
var count = 0
var inits = 1000
var offset = 0;//误差时间
var nextTime = inits - offset;//原本间隔时间 - 误差时间
var timer = setTimeout(doFunc,nextTime);
function doFunc(){
    count++
    console.log(new Date().getTime() - (start + count * inits) + 'ms');
    offset = new Date().getTime() - (start + count * inits);
    nextTime = inits - offset;
    if (nextTime < 0) { nextTime = 0; }
    if(count < 10){
        timer = setTimeout(doFunc,nextTime);
        console.log("nextTime",nextTime);
    }
}

可以看到每次的nextTime都会根据上次的误差值来动态调整，以尽量减少整体的误差。