倒计时时间校准

前端倒计时

• 前端倒计时使用场景很广泛，如首页，秒杀等，如果对于倒计时精度有要求单纯的setinterval,和setTimeOut是无法解决的
• 一般会存在精度问题，倒计时间隔有偏差，倒计时不准等问题

• 倒计时的时间间隔并不准，而且当浏览器的tab切换，或者后台切换时，倒计时误差会变大，导致倒计时时间不准确
• 这些都是存在的问题

解决方案

• 递归使用setTimeOut，并且改变每次倒计时的时间间隔，对倒计时进行校准

  var num = 0;
  // 加上阻塞事件
    setInterval(() => {
      while(num++ < 1000000){}
    }, 0)
  
    // requestAnimationFrame(function () {
    //  console.log(new Date().getTime());
    // })
  
  
    var countDown = 900,
      startDate = new Date().getTime(),
      timer = null,
      count = 0,
      offset = 0,
      interval = 1000
    if (countDown != 0) {
      timer = setTimeout(CountStart, interval)
    }
  // 每次倒计时，统计次数，进行校准
    function CountStart () {
      var nextTime;
      countDown--
      count++
      offset = new Date().getTime() - (startDate + count * interval)
      nextTime = interval - offset;
      console.log('偏差时间：'+offset+'，下次时间：'+nextTime+',倒计时：'+countDown);
  
      if (countDown <= 0) {
        clearTimeout(timer)
      } else {
        timer = setTimeout(CountStart, nextTime)
      }
    }
  

• 这是校准后的倒计时

• 因为每次倒计时后都会进行校准，下一次倒计时的时间都会改变，倒计时就会变得准确了
• 可还是有个问题：为什么每次切换tab，或者切换应用到后台，浏览器的倒计时偏差时间会变大呢？