js计时器的问题以及优化倒计时

最近忙于一个预定会议的小程序，哎 正好最近因为运动量大导致膝盖有些受伤 跑不了步 学习成为了我唯一能做的事情 😃。。。。 需求里面有一些会议到期倒计时的功能，但是前端的倒计时是存在毫秒误差的 因此想到了购物秒杀的对策，再此总结一下🧐

一、setInterval

1. 我们使用倒计时的时候尽量减少使用setInterval 因为setInterval会无视报错 一直执行 如下代码

setInterval(() => {
      try {
        cnosole.log('是console')
      } catch (e) {
        console.log('错误了')
      }
     
    }, 1000);
    

2. setInterval里面每次fn执行时间都很长，但下一次并不是等上一次执行完了再过特定时间才开始执行的，实际上早就已经等在队列里了。在fn被阻塞的时候，setInterval仍然在组织将来对回调函数的调用。 因此，当第一次fn函数调用结束时，已经有多次函数调用在等待执行，导致你的进程塞满了一堆ajax请求等待执行

我们最好使用setTimeout来控制倒计时

  setTimeToReStart = (time) => {
    const countTime = 10; // 倒计时秒数
    this.showSeconds = 10;
    this.start = Date.now();
    if( this.showSeconds >= 0) {
      this.inspectionShowTimer = setTimeout(this.countDownStart, 1000)
    }
  }

  countDownStart = (start) => {
    const checkedTime = parseInt((Date.now() - this.start) / 1000, 10);
    console.log(checkedTime, '/checkedTime');
     if(checkedTime >= this.showSeconds) {
      this.clearTimer('inspectionShowTimer');
      this.setState({ inspectionShowTime: checkedTime });
      console.log('完成');}
     else {
      this.inspectionShowTimer = setTimeout(this.countDownStart, 1000)

     }
        
  }

二、setInterval定时器存在的隐患

无法保证在特定时间就会执行 倒计时就不会很准确，需要使用setTimeout控制时间

var start = new Date().getTime(); 
var count = 0; 
 
//定时器测试
setInterval(function(){ 
     count++; 
     console.log( new Date().getTime() - (start + count * 1000)); 
},1000);

正常逻辑是输出一堆0，实际上输出却不是这样

实际输出的值
因此我们要优化的几点

• 缩短下一个定时器的时间以便缩短进程阻塞造成的执行延迟
• 从服务端获取倒计时的秒数

    var  interval = 1000,
       ms = 50000,  //从服务器和活动开始时间计算出的时间差，这里测试用50000ms
       count = 0,
       startTime = new Date().getTime();
       if( ms >= 0){
         var timeCounter = setTimeout(countDownStart,interval);                  
       }
 
     function countDownStart(){
       count++;
       var diff = new Date().getTime() - (startTime + count * interval);
       var nextTime = interval - diff;
      
       if (nextTime < 0) { nextTime = 0 };
       ms -= interval;
       console.log(下一个进程在：" + nextTime + "ms后，倒计时：" + ms + "ms");
       if(ms >= 0){
          timeCounter = setTimeout(countDownStart,nextTime)
       } else {
            clearTimeout(timeCounter); 
       }
 }