JavaScript提供定時執行程式碼的功能，叫做定時器（timer），主要由setTimeout()和setInterval()這兩個函式來完成。它們向任務佇列新增定時任務。初始接觸它的人都覺得好簡單，實時上真的如此麼？這裡記載下，一路對其使用姿勢變遷的歷程。

你所不知道的setTimeout

1, setTimeout()基礎

setTimeout函式用來指定某個函式或某段程式碼，在多少毫秒之後執行。它返回一個整數，表示定時器的編號，以後可以用來取消這個定時器。

1

var timerId = setTimeout(func|code, delay)
 

上面程式碼中，setTimeout函式接受兩個引數，第一個引數func|code是將要推遲執行的函式名或者一段程式碼，第二個引數delay是推遲執行的毫秒數。

1
2
3

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);

上面程式碼的輸出結果就是1，3，2，因為setTimeout指定第二行語句推遲1000毫秒再執行(如果這在Sublime下運用外掛以nodejs環境來執行，許直譯器不同，會報錯)。

需要注意的是，推遲執行的程式碼必須以字串的形式，放入setTimeout，因為引擎內部使用eval函式，將字串轉為程式碼。如果推遲執行的是函式，則可以直接將函式名，放入setTimeout。一方面eval函式有安全顧慮，另一方面為了便於JavaScript引擎優化程式碼，setTimeout方法一般總是採用函式名的形式，就像下面這樣。

1
2
3
4
5
6

function func(){
 console.log(2);
}
setTimeout(func,1000);
// 或者
setTimeout(function (){console.log(2)},1000);

setTimeout傳引數

除了前兩個引數，setTimeout還允許新增更多的引數。它們將被傳入推遲執行的函式（回撥函式）。

1
2
3

setTimeout(function(a,b){
  console.log(a+b);
},1000,1,1);

上面程式碼中，setTimeout共有4個引數。最後那兩個引數，將在1000毫秒之後回撥函式執行時，作為回撥函式的引數。

IE 9.0及以下版本，只允許setTimeout有兩個引數，不支援更多的引數;可以在匿名函式中，讓回撥函式帶引數執行，再把匿名函式輸入setTimeout；例如:

1
2
3

setTimeout(function() {
  myFunc("one", "two", "three");
}, 1000);

當然也可以使用bind或apply方法來解決。

例如使用bind方法，把多餘的引數繫結在回撥函式上面，生成一個新的函式輸入setTimeout。

1

setTimeout( function(arg1){}.bind(undefined, 10), 1000 );

上面程式碼中，bind方法第一個引數是undefined，表示將原函式的this繫結全域性作用域，第二個引數是要傳入原函式的引數。它執行後會返回一個新函式，該函式不帶引數。

setTimeout注意點

setTimeout()中回撥函式中的this
如果被setTimeout推遲執行的回撥函式是某個物件的方法，那麼該方法中的this關鍵字將指向全域性環境，而不是定義時所在的那個物件。

1
2
3
4
5
6
7
8
9

var x = 1;

var o = {
 x: 2,
 y: function(){
 console.log(this.x);
 }
};
setTimeout(o.y,1000);// 1

上面程式碼輸出的是1，而不是2，這表示o.y的this所指向的已經不是o，而是全域性環境了。

再看一個不容易發現錯誤的例子。

1
2
3
4
5
6
7
8

function User(login) {
 this.login = login;
 this.sayHi = function() {
 console.log(this.login);
 }
}
var user = new User('John');
setTimeout(user.sayHi, 1000);

上面程式碼只會顯示undefined，因為等到user.sayHi執行時，它是在全域性物件中執行，所以this.login取不到值。

為了防止出現這個問題，一種解決方法是將user.sayHi放在匿名函式中執行。

1
2
3

setTimeout(function() {
  user.sayHi();
}, 1000);

上面程式碼中，sayHi是在user作用域內執行，而不是在全域性作用域內執行，所以能夠顯示正確的值。

另一種解決方法是，使用bind方法，將繫結sayHi繫結在user上面。

1

setTimeout(user.sayHi.bind(user), 1000);

HTML 5標準規定，setTimeout的最短時間間隔是4毫秒。為了節電，對於那些不處於當前視窗的頁面，瀏覽器會將時間間隔擴大到1000毫秒。另外，如果膝上型電腦處於電池供電狀態，Chrome和IE 9以上的版本，會將時間間隔切換到系統定時器，大約是15.6毫秒。

setTimeout執行回撥間隔時間長度
如果你在一段程式碼中發現下面內容:

1
2
3
4

var startTime = new Date();
setTimeout(function () {
 console.log(new Date() - startTime);
}, 100)

請問最後列印的是多少?其正確答案是，取決於後面同步執行的js需要佔用多少時間。
即為：MAX(同步執行的時間, 100)；緣何如此，就得看下setTimeout執行機制了。

2, setTimeout執行機制

setTimeout和setInterval的執行機制是，將指定的程式碼移出本次執行，等到下一輪Event Loop時，再檢查是否到了指定時間。如果到了，就執行對應的程式碼；如果不到，就等到再下一輪Event Loop時重新判斷。這意味著，setTimeout指定的程式碼，必須等到本次執行的所有程式碼都執行完，才會執行。

每一輪Event Loop時，都會將“任務佇列”中需要執行的任務，一次執行完。setTimeout和setInterval都是把任務新增到“任務佇列”的尾部。因此，它們實際上要等到當前指令碼的所有同步任務執行完，然後再等到本次Event Loop的“任務佇列”的所有任務執行完，才會開始執行。由於前面的任務到底需要多少時間執行完，是不確定的，所以沒有辦法保證，setTimeout和setInterval指定的任務，一定會按照預定時間執行。

1
2

setTimeout(someTask,100);
veryLongTask();

上面程式碼的setTimeout，指定100毫秒以後執行一個任務。但是，如果後面立即執行的任務（當前指令碼的同步任務））非常耗時，過了100毫秒還無法結束，那麼被推遲執行的someTask就只有等著，等到前面的veryLongTask執行結束，才輪到它執行。

3, setTimeout(func,0)

在使用backbone框架寫程式碼的時候，因為些需求因素，新手總會在render時操縱下dom，卻發現改變dom元素狀態，程式碼沒有問題，介面卻沒有變更。而使用setTimeout(func,time)卻能解決這個問題，即便time=0;探究一番，真相只有一個：

setTimeout(func,0)含義

執行下面代，func1和func2誰會先執行？很明顯func2先執行；

1
2
3
4

setTimeout(function () {
    func1();
}, 0)
func2();

setTimeout的作用是將程式碼推遲到指定時間執行，如果指定時間為0，即setTimeout(f,0)，那麼會立刻執行嗎？

答案是不會。因為setTimeout執行機制說過，必須要等到當前指令碼的同步任務和“任務佇列”中已有的事件，全部處理完以後，才會執行setTimeout指定的任務。也就是說，setTimeout的真正作用是，在“任務佇列”的現有事件的後面再新增一個事件，規定在指定時間執行某段程式碼。setTimeout新增的事件，會在下一次Event Loop執行。

setTimeout(f,0)將第二個引數設為0，作用是讓f在現有的任務（指令碼的同步任務和“任務佇列”中已有的事件）一結束就立刻執行。也就是說，setTimeout(f,0)的作用是，儘可能早地執行指定的任務。

1
2
3

setTimeout(function (){
  console.log("你好！");
}, 0);

上面程式碼的含義是，儘可能早地顯示“你好！”。

setTimeout(f,0)指定的任務，最早也要到下一次Event Loop才會執行。請看下面的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

setTimeout(function() {
  console.log("Timeout");
}, 0);

function a(x) {
 console.log("a() 開始執行");
 b(x);
 console.log("a() 結束執行");
}

function b(y) {
 console.log("b() 開始執行");
 console.log("傳入的值為" + y);
 console.log("b() 結束執行");
}

console.log("當前任務開始");
a(42);
console.log("當前任務結束");

// 當前任務開始
// a() 開始執行
// b() 開始執行
// 傳入的值為42
// b() 結束執行
// a() 結束執行
// 當前任務結束
// Timeout

上面程式碼說明，setTimeout(f,0)必須要等到當前指令碼的所有同步任務結束後才會執行。

0毫秒實際上達不到的。根據HTML5標準，setTimeOut推遲執行的時間，最少是4毫秒。如果小於這個值，會被自動增加到4。這是為了防止多個setTimeout(f,0)語句連續執行，造成效能問題。

另一方面，瀏覽器內部使用32位帶符號的整數，來儲存推遲執行的時間。這意味著setTimeout最多隻能推遲執行2147483647毫秒（24.8天），超過這個時間會發生溢位，導致回撥函式將在當前任務佇列結束後立即執行，即等同於setTimeout(f,0)的效果。

4, setTimeout(f,0)應用

調整事件的發生順序

setTimeout(f,0)有幾個非常重要的用途。它的一大應用是，可以調整事件的發生順序。比如，網頁開發中，某個事件先發生在子元素，然後冒泡到父元素，即子元素的事件回撥函式，會早於父元素的事件回撥函式觸發。如果，我們先讓父元素的事件回撥函式先發生，就要用到setTimeout(f, 0)。

1
2
3
4
5
6
7
8
9
10
11

var input = document.getElementsByTagName('input[type=button]')[0];

input.onclick = function A() {
 setTimeout(function B() {
 input.value +=' input';
 }, 0)
};

document.body.onclick = function C() {
 input.value += ' body'
};

上面程式碼在點選按鈕後，先觸發回撥函式A，然後觸發函式C。在函式A中，setTimeout將函式B推遲到下一輪Loop執行，這樣就起到了，先觸發父元素的回撥函式C的目的了。

使用者自定義的回撥函式，通常在瀏覽器的預設動作之前觸發。比如，使用者在輸入框輸入文字，keypress事件會在瀏覽器接收文字之前觸發。因此，下面的回撥函式是達不到目的的。

1
2
3

document.getElementById('input-box').onkeypress = function(event) {
 this.value = this.value.toUpperCase();
}

上面程式碼想在使用者輸入文字後，立即將字元轉為大寫。但是實際上，它只能將上一個字元轉為大寫，因為瀏覽器此時還沒接收到文字，所以this.value取不到最新輸入的那個字元。只有用setTimeout改寫，上面的程式碼才能發揮作用。

1
2
3
4
5
6

document.getElementById('my-ok').onkeypress = function() {
 var self = this;
 setTimeout(function() {
 self.value = self.value.toUpperCase();
 }, 0);
}

上面程式碼將程式碼放入setTimeout之中，就能使得它在瀏覽器接收到文字之後觸發;原來如此：這也就解釋了緣何在使用backbone呼叫render之時，操縱dom是無效的了，因為當時連dom元素都還沒獲取到(為何沒報錯？這牽扯到另一個話題),自然等頁面渲染完畢了也沒見想要的結果了。

分割耗時任何

眾所周知javascript是單執行緒的，特點就是容易出現阻塞。如果一段程式處理時間很長，很容易導致整個頁面hold住。什麼互動都處理不了怎麼辦？

簡化複雜度？複雜邏輯後端處理？html5的多執行緒？……

上面都是ok的做法，但是setTimeout也是處理這種問題的一把好手。setTimeout一個很關鍵的用法就是分片，如果一段程式過大，我們可以拆分成若干細小的塊。由於setTimeout(f,0)實際上意味著，將任務放到瀏覽器最早可得的空閒時段執行，所以那些計算量大、耗時長的任務，常常會被放到幾個小部分，分別放到setTimeout(f,0)裡面執行(分片塞入佇列)，這樣即使在複雜程式沒有處理完時，我們操作頁面，也是能得到即時響應的。其實就是將互動插入到了複雜程式中執行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var div = document.getElementsByTagName('div')[0];

// 寫法一
for(var i=0xA00000;i<0xFFFFFF;i++) {
 div.style.backgroundColor = '#'+i.toString(16);
}

// 寫法二
var timer;
var i=0x100000;

function func() {
 timer = setTimeout(func, 0);
 div.style.backgroundColor = '#'+i.toString(16);
 if (i++ == 0xFFFFFF) clearInterval(timer);
}

timer = setTimeout(func, 0);

上面程式碼有兩種寫法，都是改變一個網頁元素的背景色。寫法一會造成瀏覽器“堵塞”，而寫法二就能就不會，這就是setTimeout(f,0)的好處。即：可利用setTimeout實現一種偽多執行緒的概念。

另一個使用這種技巧的例子是，程式碼高亮的處理。如果程式碼塊很大，就會分成一個個小塊，寫成諸如setTimeout(highlightNext, 50)的樣子，進行分塊處理。

5, clearTimeout()

setTimeout和setInterval函式，都返回一個表示計數器編號的整數值，將該整數傳入clearTimeout和clearInterval函式，就可以取消對應的定時器。

1
2
3
4
5

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整數值是連續的(一定環境下，比如瀏覽器控制檯，或者js執行環境等)，也就是說，第二個setTimeout方法返回的整數值，將比第一個的整數值大1。利用這一點，可以寫一個函式，取消當前所有的setTimeout。

1
2
3
4
5
6
7
8
9
10
11
12
13

(function() {
  var gid = setInterval(clearAllTimeouts, 0);

 function clearAllTimeouts() {
 var id = setTimeout(function() {}, 0);
 while (id > 0) {
 if (id !== gid) {
 clearTimeout(id);
 }
 id--;
 }
 }
})();

執行上面程式碼後，實際上再設定任何setTimeout都無效了。

下面是一個clearTimeout實際應用的例子。有些網站會實時將使用者在文字框的輸入，通過Ajax方法傳回伺服器，jQuery的寫法如下。

1

$('textarea').on('keydown', ajaxAction);

這樣寫有一個很大的缺點，就是如果使用者連續擊鍵，就會連續觸發keydown事件，造成大量的Ajax通訊。這是不必要的，而且很可能會發生效能問題。正確的做法應該是，設定一個門檻值，表示兩次Ajax通訊的最小間隔時間。如果在設定的時間內，發生新的keydown事件，則不觸發Ajax通訊，並且重新開始計時。如果過了指定時間，沒有發生新的keydown事件，將進行Ajax通訊將資料傳送出去。

這種做法叫做debounce（防抖動）方法，用來返回一個新函式。只有當兩次觸發之間的時間間隔大於事先設定的值，這個新函式才會執行實際的任務。假定兩次Ajax通訊的間隔不小於2500毫秒，上面的程式碼可以改寫成下面這樣。

1

$('textarea').on('keydown', debounce(ajaxAction, 2500))

利用setTimeout和clearTimeout，可以實現debounce方法。該方法用於防止某個函式在短時間內被密集呼叫，具體來說，debounce方法返回一個新版的該函式，這個新版函式呼叫後，只有在指定時間內沒有新的呼叫，才會執行，否則就重新計時。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function debounce(fn, delay){
 var timer = null; // 宣告計時器
 return function(){
 var context = this;
 var args = arguments;
 clearTimeout(timer);
 timer = setTimeout(function(){
 fn.apply(context, args);
 }, delay);
 };
}

// 用法示例
var todoChanges = debounce(batchLog, 1000);
Object.observe(models.todo, todoChanges);

現實中，最好不要設定太多個setTimeout和setInterval，它們耗費CPU。比較理想的做法是，將要推遲執行的程式碼都放在一個函式裡，然後只對這個函式使用setTimeout或setInterval。

6, 如何使用setTimeout

對setTimeout自然不止於這些，但已足見其強大。那麼問題來了，需要在專案中大量使用麼？視個人和專案而定吧；如不能熟練掌握，不建議多用。畢竟在某些情景之下，setTimeout作為一個hack的方式而存在的（打亂模組的生命週期，並且在問題出現時很難除錯，你懂的），譬如：當一個例項還沒有初始化的前，我們就使用這個例項，錯誤的解決辦法是使用例項時加個setTimeout，確保例項使用前已初始化。

但只要足夠熟悉它，以及使用的場景(包括模組生命週期)，使用它也就無可厚非了。比如underscore中不少方法也是基於這setTimeout方法寫的；比如非常強大的_.defer： 延遲呼叫function直到當前呼叫棧清空為止，類似使用延時為0的setTimeout方法。對於執行開銷大的計算和無阻塞UI執行緒的HTML渲染時候非常有用。 如果傳遞arguments引數，當函式function執行時， arguments 會作為引數傳入。

也比如前文提到的防抖動方法debounce_.debounce(function, wait, [immediate]) ;在underscore中其實現方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

 var later = function() {
 var last = _.now() - timestamp;

 if (last < wait && last >= 0) {
 timeout = setTimeout(later, wait - last);
 } else {
 timeout = null;
 if (!immediate) {
 result = func.apply(context, args);
 if (!timeout) context = args = null;
 }
 }
 };

 return function() {
 context = this;
 args = arguments;
 timestamp = _.now();
 var callNow = immediate && !timeout;
 if (!timeout) timeout = setTimeout(later, wait);
 if (callNow) {
 result = func.apply(context, args);
 context = args = null;
 }

 return result;
 };
};

參考文章連結： 阮一峰-javaScript標準參考教程