定時器 · JavaScript 教程

# 定時器 JavaScript 提供定時執行代碼的功能，叫做定時器（timer），主要由`setTimeout()`和`setInterval()`這兩個函數來完成。它們向任務隊列添加定時任務。 ## setTimeout() `setTimeout`函數用來指定某個函數或某段代碼，在多少毫秒之后執行。它返回一個整數，表示定時器的編號，以后可以用來取消這個定時器。 ```javascript var timerId = setTimeout(func|code, delay); ``` 上面代碼中，`setTimeout`函數接受兩個參數，第一個參數`func|code`是將要推遲執行的函數名或者一段代碼，第二個參數`delay`是推遲執行的毫秒數。 ```javascript console.log(1); setTimeout('console.log(2)',1000); console.log(3); // 1 // 3 // 2 ``` 上面代碼會先輸出1和3，然后等待1000毫秒再輸出2。注意，`console.log(2)`必須以字符串的形式，作為`setTimeout`的參數。如果推遲執行的是函數，就直接將函數名，作為`setTimeout`的參數。 ```javascript function f() { console.log(2); } setTimeout(f, 1000); ``` `setTimeout`的第二個參數如果省略，則默認為0。 ```javascript setTimeout(f) // 等同于 setTimeout(f, 0) ``` 除了前兩個參數，`setTimeout`還允許更多的參數。它們將依次傳入推遲執行的函數（回調函數）。 ```javascript setTimeout(function (a,b) { console.log(a + b); }, 1000, 1, 1); ``` 上面代碼中，`setTimeout`共有4個參數。最后那兩個參數，將在1000毫秒之后回調函數執行時，作為回調函數的參數。還有一個需要注意的地方，如果回調函數是對象的方法，那么`setTimeout`使得方法內部的`this`關鍵字指向全局環境，而不是定義時所在的那個對象。 ```javascript var x = 1; var obj = { x: 2, y: function () { console.log(this.x); } }; setTimeout(obj.y, 1000) // 1 ``` 上面代碼輸出的是1，而不是2。因為當`obj.y`在1000毫秒后運行時，`this`所指向的已經不是`obj`了，而是全局環境。為了防止出現這個問題，一種解決方法是將`obj.y`放入一個函數。 ```javascript var x = 1; var obj = { x: 2, y: function () { console.log(this.x); } }; setTimeout(function () { obj.y(); }, 1000); // 2 ``` 上面代碼中，`obj.y`放在一個匿名函數之中，這使得`obj.y`在`obj`的作用域執行，而不是在全局作用域內執行，所以能夠顯示正確的值。另一種解決方法是，使用`bind`方法，將`obj.y`這個方法綁定在`obj`上面。 ```javascript var x = 1; var obj = { x: 2, y: function () { console.log(this.x); } }; setTimeout(obj.y.bind(obj), 1000) // 2 ``` ## setInterval() `setInterval`函數的用法與`setTimeout`完全一致，區別僅僅在于`setInterval`指定某個任務每隔一段時間就執行一次，也就是無限次的定時執行。 ```javascript var i = 1 var timer = setInterval(function() { console.log(2); }, 1000) ``` 上面代碼中，每隔1000毫秒就輸出一個2，會無限運行下去，直到關閉當前窗口。與`setTimeout`一樣，除了前兩個參數，`setInterval`方法還可以接受更多的參數，它們會傳入回調函數。下面是一個通過`setInterval`方法實現網頁動畫的例子。 ```javascript var div = document.getElementById('someDiv'); var opacity = 1; var fader = setInterval(function() { ??opacity -= 0.1; ??if (opacity >= 0) { ????div.style.opacity = opacity; ??} else { ????clearInterval(fader); ??} }, 100); ``` 上面代碼每隔100毫秒，設置一次`div`元素的透明度，直至其完全透明為止。 `setInterval`的一個常見用途是實現輪詢。下面是一個輪詢 URL 的 Hash 值是否發生變化的例子。 ```javascript var hash = window.location.hash; var hashWatcher = setInterval(function() { ??if (window.location.hash != hash) { ????updatePage(); ??} }, 1000); ``` `setInterval`指定的是“開始執行”之間的間隔，并不考慮每次任務執行本身所消耗的時間。因此實際上，兩次執行之間的間隔會小于指定的時間。比如，`setInterval`指定每 100ms 執行一次，每次執行需要 5ms，那么第一次執行結束后95毫秒，第二次執行就會開始。如果某次執行耗時特別長，比如需要105毫秒，那么它結束后，下一次執行就會立即開始。為了確保兩次執行之間有固定的間隔，可以不用`setInterval`，而是每次執行結束后，使用`setTimeout`指定下一次執行的具體時間。 ```javascript var i = 1; var timer = setTimeout(function f() { // ... timer = setTimeout(f, 2000); }, 2000); ``` 上面代碼可以確保，下一次執行總是在本次執行結束之后的2000毫秒開始。 ## clearTimeout()，clearInterval() `setTimeout`和`setInterval`函數，都返回一個整數值，表示計數器編號。將該整數傳入`clearTimeout`和`clearInterval`函數，就可以取消對應的定時器。 ```javascript var id1 = setTimeout(f, 1000); var id2 = setInterval(f, 1000); clearTimeout(id1); clearInterval(id2); ``` 上面代碼中，回調函數`f`不會再執行了，因為兩個定時器都被取消了。 `setTimeout`和`setInterval`返回的整數值是連續的，也就是說，第二個`setTimeout`方法返回的整數值，將比第一個的整數值大1。 ```javascript function f() {} setTimeout(f, 1000) // 10 setTimeout(f, 1000) // 11 setTimeout(f, 1000) // 12 ``` 上面代碼中，連續調用三次`setTimeout`，返回值都比上一次大了1。利用這一點，可以寫一個函數，取消當前所有的`setTimeout`定時器。 ```javascript (function() { // 每輪事件循環檢查一次 var gid = setInterval(clearAllTimeouts, 0); function clearAllTimeouts() { var id = setTimeout(function() {}, 0); while (id > 0) { if (id !== gid) { clearTimeout(id); } id--; } } })(); ``` 上面代碼中，先調用`setTimeout`，得到一個計算器編號，然后把編號比它小的計數器全部取消。 ## 實例：debounce 函數有時，我們不希望回調函數被頻繁調用。比如，用戶填入網頁輸入框的內容，希望通過 Ajax 方法傳回服務器，jQuery 的寫法如下。 ```javascript $('textarea').on('keydown', ajaxAction); ``` 這樣寫有一個很大的缺點，就是如果用戶連續擊鍵，就會連續觸發`keydown`事件，造成大量的 Ajax 通信。這是不必要的，而且很可能產生性能問題。正確的做法應該是，設置一個門檻值，表示兩次 Ajax 通信的最小間隔時間。如果在間隔時間內，發生新的`keydown`事件，則不觸發 Ajax 通信，并且重新開始計時。如果過了指定時間，沒有發生新的`keydown`事件，再將數據發送出去。這種做法叫做 debounce（防抖動）。假定兩次 Ajax 通信的間隔不得小于2500毫秒，上面的代碼可以改寫成下面這樣。 ```javascript $('textarea').on('keydown', debounce(ajaxAction, 2500)); 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); }; } ``` 上面代碼中，只要在2500毫秒之內，用戶再次擊鍵，就會取消上一次的定時器，然后再新建一個定時器。這樣就保證了回調函數之間的調用間隔，至少是2500毫秒。 ## 運行機制 `setTimeout`和`setInterval`的運行機制，是將指定的代碼移出本輪事件循環，等到下一輪事件循環，再檢查是否到了指定時間。如果到了，就執行對應的代碼；如果不到，就繼續等待。這意味著，`setTimeout`和`setInterval`指定的回調函數，必須等到本輪事件循環的所有同步任務都執行完，才會開始執行。由于前面的任務到底需要多少時間執行完，是不確定的，所以沒有辦法保證，`setTimeout`和`setInterval`指定的任務，一定會按照預定時間執行。 ```javascript setTimeout(someTask, 100); veryLongTask(); ``` 上面代碼的`setTimeout`，指定100毫秒以后運行一個任務。但是，如果后面的`veryLongTask`函數（同步任務）運行時間非常長，過了100毫秒還無法結束，那么被推遲運行的`someTask`就只有等著，等到`veryLongTask`運行結束，才輪到它執行。再看一個`setInterval`的例子。 ```javascript setInterval(function () { console.log(2); }, 1000); sleep(3000); function sleep(ms) { var start = Date.now(); while ((Date.now() - start) < ms) { } } ``` 上面代碼中，`setInterval`要求每隔1000毫秒，就輸出一個2。但是，緊接著的`sleep`語句需要3000毫秒才能完成，那么`setInterval`就必須推遲到3000毫秒之后才開始生效。注意，生效后`setInterval`不會產生累積效應，即不會一下子輸出三個2，而是只會輸出一個2。 ## setTimeout(f, 0) ### 含義 `setTimeout`的作用是將代碼推遲到指定時間執行，如果指定時間為`0`，即`setTimeout(f, 0)`，那么會立刻執行嗎？答案是不會。因為上一節說過，必須要等到當前腳本的同步任務，全部處理完以后，才會執行`setTimeout`指定的回調函數`f`。也就是說，`setTimeout(f, 0)`會在下一輪事件循環一開始就執行。 ```javascript setTimeout(function () { console.log(1); }, 0); console.log(2); // 2 // 1 ``` 上面代碼先輸出`2`，再輸出`1`。因為`2`是同步任務，在本輪事件循環執行，而`1`是下一輪事件循環執行。總之，`setTimeout(f, 0)`這種寫法的目的是，盡可能早地執行`f`，但是并不能保證立刻就執行`f`。實際上，`setTimeout(f, 0)`不會真的在0毫秒之后運行，不同的瀏覽器有不同的實現。以 Edge 瀏覽器為例，會等到4毫秒之后運行。如果電腦正在使用電池供電，會等到16毫秒之后運行；如果網頁不在當前 Tab 頁，會推遲到1000毫秒（1秒）之后運行。這樣是為了節省系統資源。 ### 應用 `setTimeout(f, 0)`有幾個非常重要的用途。它的一大應用是，可以調整事件的發生順序。比如，網頁開發中，某個事件先發生在子元素，然后冒泡到父元素，即子元素的事件回調函數，會早于父元素的事件回調函數觸發。如果，想讓父元素的事件回調函數先發生，就要用到`setTimeout(f, 0)`。 ```javascript // HTML 代碼如下 // <input type="button" id="myButton" value="click"> var input = document.getElementById('myButton'); input.onclick = function A() { setTimeout(function B() { input.value +=' input'; }, 0) }; document.body.onclick = function C() { input.value += ' body' }; ``` 上面代碼在點擊按鈕后，先觸發回調函數`A`，然后觸發函數`C`。函數`A`中，`setTimeout`將函數`B`推遲到下一輪事件循環執行，這樣就起到了，先觸發父元素的回調函數`C`的目的了。另一個應用是，用戶自定義的回調函數，通常在瀏覽器的默認動作之前觸發。比如，用戶在輸入框輸入文本，`keypress`事件會在瀏覽器接收文本之前觸發。因此，下面的回調函數是達不到目的的。 ```javascript // HTML 代碼如下 // <input type="text" id="input-box"> document.getElementById('input-box').onkeypress = function (event) { this.value = this.value.toUpperCase(); } ``` 上面代碼想在用戶每次輸入文本后，立即將字符轉為大寫。但是實際上，它只能將本次輸入前的字符轉為大寫，因為瀏覽器此時還沒接收到新的文本，所以`this.value`取不到最新輸入的那個字符。只有用`setTimeout`改寫，上面的代碼才能發揮作用。 ```javascript document.getElementById('input-box').onkeypress = function() { var self = this; setTimeout(function() { self.value = self.value.toUpperCase(); }, 0); } ``` 上面代碼將代碼放入`setTimeout`之中，就能使得它在瀏覽器接收到文本之后觸發。由于`setTimeout(f, 0)`實際上意味著，將任務放到瀏覽器最早可得的空閑時段執行，所以那些計算量大、耗時長的任務，常常會被放到幾個小部分，分別放到`setTimeout(f, 0)`里面執行。 ```javascript 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) clearTimeout(timer); } timer = setTimeout(func, 0); ``` 上面代碼有兩種寫法，都是改變一個網頁元素的背景色。寫法一會造成瀏覽器“堵塞”，因為 JavaScript 執行速度遠高于 DOM，會造成大量 DOM 操作“堆積”，而寫法二就不會，這就是`setTimeout(f, 0)`的好處。另一個使用這種技巧的例子是代碼高亮的處理。如果代碼塊很大，一次性處理，可能會對性能造成很大的壓力，那么將其分成一個個小塊，一次處理一塊，比如寫成`setTimeout(highlightNext, 50)`的樣子，性能壓力就會減輕。