js中两种定时器的本质区别

这里主要介绍常用的setTimeout 和 setInterval。

1. 两个共同点：

• setTimeout和setInterval这两个定时器一旦触发，就是和js程序并行执行的，也就是他们并不在一个时间线上。计时器的作用是仅仅是做一个计划，那就是每隔一段时间执行一次目标方法。<b>下面的例子就证明了这一点，17ms之前，程序走就执行到了下面。</b>
  var t = null;
  var f = null;
  var i = 0;

   function a() {
       i++;
       if (i == 20) {
           return;
       }
       t = setTimeout(a, 17);
   }
   a();
   console.log(i); // 1
  

2. 两个本质上的不同:异步调用运行机制不同

• setTimeout异步运行过程

   btn.onclick = function(){
       setTimeout(function(){
           console.log(1);
       },250);
   }
  

<b>如果上面代码中的onclick事件处理程序执行了300ms，那么定时器的代码至少要在定时器设置之后的300ms后才会被执行。队列中所有的代码都要等到javascript进程空闲之后才能执行，而不管它们是如何添加到队列中的.</b>

• setInterval导致两个问题：1、某些间隔被跳过；2、多个定时器的代码执行之间的间隔可能比预期的小。
  <b>假设，某个onclick事件处理程序使用serInterval()设置了200ms间隔的定时器。如果事件处理程序花了300ms多一点时间完成，同时定时器代码也花了差不多的时间，就会同时出现跳过某间隔的情况</b>
  • <b>通俗来讲，setInterval会严格按照规定时间准备事件，不管执不执行，但是队列中只能有一个队列未执行，如果插入的时候发现多了就取消这次事件排队。</b>

3、为了避免setInterval()定时器的问题，可以使用链式setTimeout()调用。

setTimeout(function fn(){
    setTimeout(fn,interval);
},interval);

<b>这个模式链式调用了setTimeout()，每次函数执行的时候都会创建一个新的定时器。第二个setTimeout()调用当前执行的函数，并为其设置另外一个定时器。这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。</b>