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 变得更加准时。