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)