定时器：基础认知

定时器

定时器概念

• 是程序按指定的时间间隔（反复）自动的执行一项任务

• 定时器方法属于window对象
  若是在该方法中使用this，this的值在非严格模式下返回的是window对象，在严格模式下返回的是undefined。

• 分为一次性定时器和周期性定时器

一次性定时器

setTimeout()，接收两个参数：要执行的代码和以毫秒表示的时间，只在等待时间到达后执行一次

• 第一个参数能够是一段包含JavaScript代码的字符串（和使用eval()方法的字符串相同），也能够是一个函数，建议使用函数做为参数

• 第二个参数表示等待时间，但须要特别注意的是，通过该段时间后，代码不必定执行。（定时器执行顺序会致使一些问题）

setTimeout(function(){
    alert(‘hello world’);
},100);
//或者
setTimeout(“alert(‘hello world’)”,100);

• 清除一次性定时器：
  setTimeout()方法每次被调用都会返回一个新的数值，连续不重复,做为该方法的惟一标识符，若是须要取消一次性定时器，能够在执行前设置clearTimeout()。

var timeoutId=setTimeout(function(){alert(‘hello world’)},1000);
clearTimeout(timeoutId);//在未调用以前清除了定时器

只要在指定的时间以前设置clearTimeout()就可让一次性定时器不执行。由于一次性定时器只执行一次，因此确认须要调用时，不须要去清除。

周期性定时器

setInterval()，接收的参数类型和一次性定时器相同，按照指定的时间间隔（第二个参数）去重复执行代码，直到该定时器被取消或页面被卸载。

• 清除周期性定时器

var i=0;
var timerID=setInterval(function(){
    console.log(i);
    i+=1;
    if (i>10){clearInterval(timerID)}
},100);

同一次性定时器相同，都会返回一个惟一标识符，在该定时器未中止以前，这个惟一标识符是不变的，下次被从新调用，会返回另外一个不一样的数值。在达到清除条件时，设置clearInterval()，由于周期性定时器会一直执行下去，因此必须设置清除。

定时器与调用队列

浏览器是多线程程序，可同时执行多个任务，但，JavaScript是一个单线程的解释器，一个时刻只能执行一项任务。
为了控制要执行的代码，就有一个JavaScript任务队列，这些任务会按它们添加到队列的顺序执行，定时器的任务函数会在前面代码执行完以后才执行，因此会存在等待时间超过设定的时间的状况。

例子

for(var i=0;i<3;i++){
    setTimeout("console.log(i)",0);
}
    //3,3,3

在控制台中输入以上代码，会输出三个3，缘由是当浏览器读到定时器时，只是把任务函数加入了回调队列，但必须在主程序（for循环）执行完后才会执行，而主程序执行完后，i的值为3，而后调用已经在任务队列中等待的三个定时器任务函数，则都输出相同的3。

一次性定时器和周期性定时器的比较

一次性定时器模拟周期性定时器

var i=0
setTimeout(function(){
    if (i<10){                           //设置任务函数执行条件
        console.log(i);
        i+=1;
        setTimeout(arguments.callee,100);//链式调用一次性定时器
    }
},100)

• 使用一次性定时器时，没必要跟踪定时器ID，由于每次执行代码后，若是再也不设置另外一次调用，定时器就会自动中止。

• 因为一次性定时器是在当前任务函数执行完以后，才开始执行下一次定时器函数，因此定时器中所设置的间隔时间是从当前任务函数执行完以后开始计算的，这一点和周期性定时器不一样。

周期性定时器模拟一次性定时器

var timerID=setInterval(function(){
    alert('hello world');
    clearInterval(timerID);
},100);

• 必须设置定时器清除，不然周期性定时器会一直执行下去。

• 周期性定时器中的时间间隔是指每隔某段时间就调用一次，而无论每次执行任务函数花费多长时间，若是任务函数执行时间超过了设定的时间间隔，就会发生错误。

总结

• 使用定时器时优先选用一次性定时器，链式调用setTimeout来实现周期性定时器的效果。

• 注意定时器的任务函数添加进任务队列和执行顺序。