setTimeout 与 setInterval

理解

setTimeout、setInterval

当有一项需求需要在一段时间之后执行或者需要反复的执行的时候就可以使用定时器：setTimeout/setInterval。
javascript是运行与单线程的环境中的（即执行完一项，再执行下一项），定时器仅仅是计划代码在未来的某个时间执行。执行的时间是不能保证的，因为在页面的生命周期中，不同的时间段可能会有其他代码在控制着javascript进程，并且该进程的执行时间也不可知。在页面下载完成后代码的运行、事件处理程序、Ajax回调函数都必须使用同样的线程来执行。
浏览器负责进行排序，指派某段代码在某一个时间点运行的优先级。
在javascript中没有任何代码是立刻执行的，但一旦进程空闲则尽快执行。
定时器对队列的工作方式是，当特定的时间过去后将代码插入队列中，注意，给队列添加代码并不意味着对它立刻执行，而只是表示它会尽快执行。设定一个100ms后执行的定时器不代表到100ms 后代码就理科执行，它只是表示100ms后会被加入到队列中，如果在这个时间点上队列中没有其他代码在执行，处于空闲中，那么这段代码就会执行，看上去好像在精确的时间点上执行了，在其他情况下可能会明显的等待更长的时间，例如在定时器之前有一个比较大的数组在处理中，而定时器的代码在数组的处理过程中已经添加带队列中了，但是由于数组的处理函数并没有执行完，所以定时器并没有执行，而是在等待进程空闲。

区别

setTimeout和setInterval同时接收两个参数：待执行函数和待插入队列时间

  setTimeout(doSomething,millisecond);
setInterval(doSomething,millisecond);

第一个参数都是一致的，setTimeout的第二个参数代码到了设定时间后将代码插入队列中，待进程空闲后执行；而setInterval的第二个参数则会每隔一段时间（设定的时间）向队列中插入代码，重复执行该函数。
关于定时器需要记住的是，指定的时间间隔表示何时将定时器的代码添加到队列中，而不是何时执行代码。队列中的所有代码都要等进程空闲之后才能执行，而不管他们是如何加入到队列中的。

使用

setTimeout

var btn = document.querySelector('#div');
setTimeout(function(){
  btn.style.dispaly = 'none'  
},1000)

setInterval

var count = 0;
setInterval(function(){
    count = count + 1;
    console.log(count);
},1000)

重复的定时器

要创建重复的定时器可以直接使用setInterval，它确保了定时器代码有规则的插入队列中，但这个方式的问题在于，如果定时器的代码在被添加到队列之前还没有执行完，结果导致定时器代码会连续好几次的运行，之间没有停顿。这种定时器的规则存在两个问题：（1）某些间隔会被跳过；（2）多个定时器的代码执行之间的间隔可能会比预期到要小。
在使用重复的定时器的时候，为了避免这两个问题可以使用setTimeout模拟setInterval。

setTimeout(function(){
  //doSomething
  setTimeout(argumets.callee,Interval)
},Interval)

采用链式调用的方式调用setTimeout,每次函数执行的时候都会创建一个新的定时器。第二个setTimeout调用argumets.callee来获得当前执行函数的引用。并设置另外一个定时器。这样设置的优点在于，在第一个定时器的代码执行完成之后才会创建下一个定时器，保证了在下一次代码执行之前有一定的间隔，避免连续执行。

取消定时器

与设置定时器对应的是取消定时器
setTimeour => clearTimeout
setInterval => clearInterval

var time = setTimeour(function(){
  //doSomething
},1000)
clearTimeout(time);
var time2 = setInterval(function(){

//doSomething

},1000)
clearInterval(time2)

高级功能

运行在浏览器中的javascript都被分配了一个确定数量的资源，其运行的内存和处理时间是被严格限制的，以防止恶意的web程序把用户的计算机搞挂了。脚本长时间运行通常是有两个原因造成的：过长过身的函数嵌套调用或者进行大量循环处理。对于大量循环的处理可以使用数组分块的处理方式。执行完一段在执行下一段。

function chunk(arr,time){
  var newArr = arr;
  var item;
  setTimeout(function(){
      item = newArr.shift();
      doSomething(item);
      if(newArr.lenght > 0){
        setTimeout(argumets.callee,time)
      }
  },time)
}

一旦某一个函数需要话50ms以上的时间去执行，那就需要考虑是否将任务分割为一系列可以使用定时器执行的小任务。

函数节流

函数节流的思想在于某些代码不可以在没有间断的情况下连续重复的执行；浏览器对于某些DOM的运算处理比起非DOM运算处理要花更多的内存和时间。
例如当用户改变浏览器大小触发onresize事件时，需要更新内部元素的大小。这时候就会不断的触发onresize事件。这在IE下很容易让浏览器崩溃。

var do = {
  id:null,something:function(){
    //doSomething
  },init:function(){
    var that = this;
    clearTimeout(that.id);
    that.id = setTimeout(function(){
      that.something();
      },1000)
  }
}
do.init();

需要注意的是定时器的执行环境始终指向window，如果需要指定执行的环境，请将this在定时器外部存储之后在调用。