JavaScript 前端倒计时纠偏实现

前端网页倒计时是非常常见的应用，我们在各大购物网站的秒杀活动中总是能见到它的身影。但是在实际情况中，我们常常会发现当网页不刷新、让倒计时程序持续运行时，显示时间相比实际时间会越来越慢，相信大家也有在秒杀时间即将到来时不停刷新页面的经历。原因自然也不难理解：倒计时通常使用定时器（setTimeout 或者 setInterval ）实现，而 JavaScript 的单线程特性使得主线程执行栈中出现阻塞时，任务队列中的异步任务并不能及时执行，因此浏览器并不能保证在定时器设置的时间结束后代码总是被准时执行，这就造成了倒计时的偏差。

一般的解决方法是前端定时向服务器发送请求获取最新的时间差来校准倒计时时间，主动（程序里设置定时请求）或被动的（F5 已被用户按坏）区别而已。这个方法简单但也有点粗暴，下面提供一种方法，能够一定程度上不依赖服务端实现倒计时的纠偏。代码非原创，时间久远忘了出处，在此记录一下学习过程以免遗忘。如有侵权请联系我。

首先我们需要模拟主线程阻塞的环境，同时又不能让主线程一直阻塞：

setInterval(function(){ 
  let j = 0
  while(j++ < 100000000)
}, 0)

然后是主要的代码：

const interval = 1000
let ms = 50000,  // 从服务器和活动开始时间计算出的时间差，这里测试用 50000 ms
let count = 0
const startTime = new Date().getTime()
let timeCounter
if( ms >= 0) {
  timeCounter = setTimeout(countDownStart, interval)
}
 
function countDownStart () {
   count++
   const offset = new Date().getTime() - (startTime + count * interval) // A
   let nextTime = interval - offset
   if (nextTime < 0) { 
       nextTime = 0 
   }
   ms -= interval
   console.log(`误差：${offset} ms，下一次执行：${nextTime} ms 后，离活动开始还有：${ms} ms`)
   if (ms < 0) {
     clearTimeout(timeCounter)
   } else {
     timeCounter = setTimeout(countDownStart, nextTime)
   }
 }

代码的基本原理并不复杂：通过递归调用 setTimeout 进行倒计时操作的执行。而每次执行函数时会维护一个 count 变量，用以记录已经执行过的倒计时次数，使用代码 A 处的公式可计算出当前执行倒计时的时间与实际应执行时间的偏差，进而可以计算出下次执行倒计时的时间。

本文首发于我的博客（点此查看），欢迎关注。