1. 背景:
作为一个web前端开发工程师,需要经常与页面浏览器打交道,很多时候我们在项目中需要用到延迟
来获取数据,比如直播页面,接口返回给我们一个时间,我们需要在时间到达后去执行一些操作,使用setTimeout
会发现setTimeout 是不准的,因为 setTimeout 是一个宏任务
,它的指定时间指的是:进入主线程的时间。
2. 实现准时的 “setTimeout”: setTimeout 系统时间补偿
当每一次定时器执行时后,都去获取系统的时间来进行修正,虽然每次运行可能会有误差,但是通过系统时间对每次运行的修复,能够让后面每一次时间都得到一个补偿。
function timer() {
var speed = 500,
counter = 1,
start = new Date().getTime();
function instance()
{
var real = (counter * speed),
ideal = (new Date().getTime() - start);
counter++;
var diff = (ideal - real);
form.diff.value = diff;
window.setTimeout(function() { instance(); }, (speed - diff)); // 通过系统时间进行修复
};
window.setTimeout(function() { instance(); }, speed);
}
3. 结束: 通过系统的时间补偿,能够让我们的 setTimeout 变得更加准时。