定时器相关 setTimeout setInterval

这个问题也是在参加百度的前端技术学院中遇到的 任务中需要用js实现动画  导师给的评价中setInterval会导致bug 当时不理解   下面把自己学习的过程分享出来

再次理解单线程

  老是说js是单线程的，其实自己根本没有好好的理解好这个单线程的意思，就比如我对这个setTimeout(function(){},time)的理解就是在从现在开始到time时间点就会执行的一段代码，其实这样的理解是有问题的，定时器只是计划代码在未来的某个时间执行，但是这个时机是无法保证的 ,这句话能更好的帮助我们理解好js的单线程（是不是可以这样理解 就是各个代码对js单线程的争夺占用）

其实可以把js想象是在一个时间线上运行的，我们添加的事件处理函数和ajax回调都是在这个时间线上添加一定的代码，等待执行，当前一段代码执行过后，这个时间线就处于空闲状态，就会执行后续的代码，也就出现了这样的场景就是

    var btn = document.getElementById("btn");
    btn.addEventListener("click",function(){
      setTimeout(function(){
          console.log(1);
      },1000);
      /*事件处理程序的其他逻辑*/
    },false);

这个例子能充分的反映出我之前的错误理解，上面的例子当相应点击事件，在1000ms后将一段代码加入了js执行的时间线上(队列),按我之前的理解就是1000ms后console.log(1)就会执行，但是上面的例子中事件处理程序的其他逻辑的执行时间超出了1000ms，setTimeout就不是在设置完1000ms之后执行了，因为需要等待时间线(队列)的空闲，通过上面的例子我们就很好的理解了setTimeout

setInterval

通过对setTimeout的理解，发现之前对setInterval的理解也存在问题，setInteral(function(){},time) 我的理解是间隔一定的时间段就会去执行的代码，但是这些代码之间会相互干扰吗，他们之间的切换呢 ，这些问题我都没考虑过，setInterval会导致bug我也是一头雾水

首先setInterval的功能的确是每隔一定的时间间隔在时间线(队列)中插入代码，并且js的引擎提供了这样的机制，就是当这个代码的实例已经存在这个时间线(队列)中,不会将这段代码继续的添加到时间线(队列),这样就能保证定时器的代码加入到队列中的最小事件间隔是指定的间隔,但是这种方式有一定的问题，也就是会出现bug

(1)某些间隔会被跳过

(2)多个定时器的代码执行之前的间隔可能会比预期的小

理解定时器代码实例