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

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

一、setInterval

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

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

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); 
       }
 }

最后编辑于：2019.11.21 11:29:43