js 定时器 setTimeout setInterval

一、setTimeout

var timer;
      timer=setTimeout(fn,0);
      function fn(){
         //执行代码块
         let i=0;
         while(i<1000){
            i++;
         }
         //--
         //清除上次的一次性定时器
         clearTimeout(timer);
         timer=null;
         //再添加一个新的定时器
         timer=setTimeout(fn,0);
         console.log(timer)//0 1 2 ...一直累加
      }

一开始我的疑问是， timer 这个变量我明明在每次赋值之前清掉了上次的定时器，并且赋值为null了，为什么timer还是累加的呢?难道clearTimerout竟然没有清掉定时器？

经过研究，原来timer只是一个 number类型的id值，过程是这样的，clearTimerout 清理掉了定时器1，然后创建了定时器2，清掉了2，创建了3，所以内存中定时器并没有累计很多，始终只是一个定时器在运行而已。所以是我多虑了。。。

二、setInterval

var timer;
      timer=setInterval(fn,10);
      function fn(){
         //执行代码块
         let i=0;
         while(i<1000){
            i++;
         }
         //--
      }

一开始我的疑问是，加入我定时器的回调函数的执行时间是50ms，而定时器执行的间隔时间设置的10ms，那么是不是在我上次的回调函数还没执行完时候，下一次定时器就要执行了，javascript是单线程的，然后程序会出问题。。

经过研究，原来如果下次的定时器需要执行了，但这次的回调函数还在执行，则定时器会被暂存到系统的执行队列中，等待执行，等到这次的回调函数执行完毕，则在队列队尾等待的定时器才会执行，而且定时器的间隔时间也就无需在等待了，定时器立即执行。

我没有实验，可以参考这篇文章。转载 https://www.jianshu.com/p/0ad05e325f9b

js 定时器 setTimeout setInterval

推荐阅读更多精彩内容