定時器：基礎認知

定時器

定時器概念

• 是程序按指定的時間間隔（反覆）自動的執行一項任務

• 定時器方法屬於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來實現週期性定時器的效果。

• 注意定時器的任務函數添加進任務隊列和執行順序。