JavaScript中定時器

時間 2019-11-18

原文原文鏈接

JavaScript提供定時執行代碼的功能，叫作定時器（timer），主要由setTimeout()和setInterval()這兩個函數來完成。它們向任務隊列添加定時任務。javascript

setTimeout()

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

var timerId = setTimeout(func|code, delay)

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

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

上面代碼的輸出結果就是1，3，2，由於setTimeout指定第二行語句推遲1000毫秒再執行。web

須要注意的是，推遲執行的代碼必須以字符串的形式，放入setTimeout，由於引擎內部使用eval函數，將字符串轉爲代碼。若是推遲執行的是函數，則能夠直接將函數名，放入setTimeout。一方面eval函數有安全顧慮，另外一方面爲了便於JavaScript引擎優化代碼，setTimeout方法通常老是採用函數名的形式，就像下面這樣。ajax

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

若是省略setTimeout的第二個參數，則該參數默認爲0。瀏覽器

除了前兩個參數，setTimeout還容許添加更多的參數。它們將被傳入推遲執行的函數（回調函數）。安全

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

上面代碼中，setTimeout共有4個參數。最後那兩個參數，將在1000毫秒以後回調函數執行時，做爲回調函數的參數。服務器

IE 9.0及如下版本，只容許setTimeout有兩個參數，不支持更多的參數。這時有三種解決方法。第一種是在一個匿名函數裏面，讓回調函數帶參數運行，再把匿名函數輸入setTimeout。app

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

上面代碼中，myFunc是真正要推遲執行的函數，有三個參數。若是直接放入setTimeout，低版本的IE不能帶參數，因此能夠放在一個匿名函數。異步

第二種解決方法是使用bind方法，把多餘的參數綁定在回調函數上面，生成一個新的函數輸入setTimeout。

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

上面代碼中，bind方法第一個參數是undefined，表示將原函數的this綁定全局做用域，第二個參數是要傳入原函數的參數。它運行後會返回一個新函數，該函數不帶參數。

第三種解決方法是自定義setTimeout，使用apply方法將參數輸入回調函數。

<!--[if lte IE 9]><script> (function(f){ window.setTimeout =f(window.setTimeout); window.setInterval =f(window.setInterval); })(function(f){return function(c,t){ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)} }); </script><![endif]-->

除了參數問題，setTimeout還有一個須要注意的地方：若是被setTimeout推遲執行的回調函數是某個對象的方法，那麼該方法中的this關鍵字將指向全局環境，而不是定義時所在的那個對象。

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

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

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

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放在函數中執行。

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

上面代碼中，sayHi是在user做用域內執行，而不是在全局做用域內執行，因此可以顯示正確的值。

另外一種解決方法是，使用bind方法，將綁定sayHi綁定在user上面。

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

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

setInterval()

setInterval函數的用法與setTimeout徹底一致，區別僅僅在於setInterval指定某個任務每隔一段時間就執行一次，也就是無限次的定時執行。

<input type="button" onclick="clearInterval(timer)" value="stop"><script>var i = 1var timer = setInterval(function() {console.log(2);}, 1000);</script>

上面代碼表示每隔1000毫秒就輸出一個2，直到用戶點擊了中止按鈕。

與setTimeout同樣，除了前兩個參數，setInterval方法還能夠接受更多的參數，它們會傳入回調函數，下面是一個例子。

function f(){for (var i=0;i<arguments.length;i++){console.log(arguments[i]);}}setInterval(f, 1000, "Hello World");// Hello World// Hello World// Hello World// ...

若是網頁不在瀏覽器的當前窗口（或tab），許多瀏覽器限制setInteral指定的反覆運行的任務最多每秒執行一次。

setInterval指定的是「開始執行」之間的間隔，並不考慮每次任務執行自己所消耗的時間。所以實際上，兩次執行之間的間隔會小於指定的時間。好比，setInterval指定每100ms執行一次，每次執行須要5ms，那麼第一次執行結束後95毫秒，第二次執行就會開始。若是某次執行耗時特別長，好比須要105毫秒，那麼它結束後，下一次執行就會當即開始。

爲了確保兩次執行之間有固定的間隔，能夠不用setInterval，而是每次執行結束後，使用setTimeout指定下一次執行的具體時間。

var i = 1;var timer = setTimeout(function() {alert(i++);timer = setTimeout(arguments.callee, 2000);}, 2000);

上面代碼能夠確保，下一個對話框老是在關閉上一個對話框以後2000毫秒彈出。

根據這種思路，能夠本身部署一個函數，實現間隔時間肯定的setInterval的效果。

function interval(func, wait){var interv = function(){func.call(null);setTimeout(interv, wait);};setTimeout(interv, wait);}interval(function(){console.log(2);},1000);

上面代碼部署了一個interval函數，用循環調用setTimeout模擬了setInterval。

HTML 5標準規定，setInterval的最短間隔時間是10毫秒，也就是說，小於10毫秒的時間間隔會被調整到10毫秒。

clearTimeout()，clearInterval()

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

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

setTimeout和setInterval返回的整數值是連續的，也就是說，第二個setTimeout方法返回的整數值，將比第一個的整數值大1。利用這一點，能夠寫一個函數，取消當前全部的setTimeout。

(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的寫法以下。

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

這樣寫有一個很大的缺點，就是若是用戶連續擊鍵，就會連續觸發keydown事件，形成大量的Ajax通訊。這是沒必要要的，並且極可能會發生性能問題。正確的作法應該是，設置一個門檻值，表示兩次Ajax通訊的最小間隔時間。若是在設定的時間內，發生新的keydown事件，則不觸發Ajax通訊，而且從新開始計時。若是過了指定時間，沒有發生新的keydown事件，將進行Ajax通訊將數據發送出去。

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

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

利用setTimeout和clearTimeout，能夠實現debounce方法。該方法用於防止某個函數在短期內被密集調用，具體來講，debounce方法返回一個新版的該函數，這個新版函數調用後，只有在指定時間內沒有新的調用，纔會執行，不然就從新計時。

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。

運行機制

setTimeout和setInterval的運行機制是，將指定的代碼移出本次執行，等到下一輪Event Loop時，再檢查是否到了指定時間。若是到了，就執行對應的代碼；若是不到，就等到再下一輪Event Loop時從新判斷。這意味着，setTimeout指定的代碼，必須等到本次執行的全部代碼都執行完，纔會執行。

每一輪Event Loop時，都會將「任務隊列」中須要執行的任務，一次執行完。setTimeout和setInterval都是把任務添加到「任務隊列」的尾部。所以，它們實際上要等到當前腳本的全部同步任務執行完，而後再等到本次Event Loop的「任務隊列」的全部任務執行完，纔會開始執行。因爲前面的任務到底須要多少時間執行完，是不肯定的，因此沒有辦法保證，setTimeout和setInterval指定的任務，必定會按照預約時間執行。

setTimeout(someTask,100);veryLongTask();

上面代碼的setTimeout，指定100毫秒之後運行一個任務。可是，若是後面當即運行的任務（當前腳本的同步任務））很是耗時，過了100毫秒還沒法結束，那麼被推遲運行的someTask就只有等着，等到前面的veryLongTask運行結束，才輪到它執行。

這一點對於setInterval影響尤爲大。

setInterval(function(){console.log(2);},1000);(function (){sleeping(3000);})();

上面的第一行語句要求每隔1000毫秒，就輸出一個2。可是，第二行語句須要3000毫秒才能完成，請問會發生什麼結果？

結果就是等到第二行語句運行完成之後，馬上連續輸出三個2，而後開始每隔1000毫秒，輸出一個2。也就是說，setIntervel具備累積效應，若是某個操做特別耗時，超過了setInterval的時間間隔，排在後面的操做會被累積起來，而後在很短的時間內連續觸發，這可能或形成性能問題（好比集中發出Ajax請求）。

爲了進一步理解JavaScript的單線程模型，請看下面這段僞代碼。

function init(){{ 耗時5ms的某個操做 }觸發mouseClickEvent事件{ 耗時5ms的某個操做 }setInterval(timerTask,10);{ 耗時5ms的某個操做 }}function handleMouseClick(){耗時8ms的某個操做}function timerTask(){耗時2ms的某個操做}

請問調用init函數後，這段代碼的運行順序是怎樣的？

0-15ms：運行init函數。
15-23ms：運行handleMouseClick函數。請注意，這個函數是在5ms時觸發的，應該在那個時候就當即運行，可是因爲單線程的關係，必須等到init函數完成以後再運行。
23-25ms：運行timerTask函數。這個函數是在10ms時觸發的，規定每10ms運行一次，即在20ms、30ms、40ms等時候運行。因爲20ms時，JavaScript線程還有任務在運行，所以必須延遲到前面任務完成時再運行。
30-32ms：運行timerTask函數。
40-42ms：運行timerTask函數。

setTimeout(f,0)

含義

setTimeout的做用是將代碼推遲到指定時間執行，若是指定時間爲0，即setTimeout(f, 0)，那麼會馬上執行嗎？

答案是不會。由於上一段說過，必需要等到當前腳本的同步任務和「任務隊列」中已有的事件，所有處理完之後，纔會執行setTimeout指定的任務。也就是說，setTimeout的真正做用是，在「消息隊列」的現有消息的後面再添加一個消息，規定在指定時間執行某段代碼。setTimeout添加的事件，會在下一次Event Loop執行。

setTimeout(f, 0)將第二個參數設爲0，做用是讓f在現有的任務（腳本的同步任務和「消息隊列」指定的任務）一結束就馬上執行。也就是說，setTimeout(f, 0)的做用是，儘量早地執行指定的任務。而並非會馬上就執行這個任務。

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

上面代碼的含義是，儘量早地顯示「你好！」。

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

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毫秒實際上也是達不到的。根據HTML 5標準，setTimeOut推遲執行的時間，最少是4毫秒。若是小於這個值，會被自動增長到4。這是爲了防止多個setTimeout(f, 0)語句連續執行，形成性能問題。

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

應用

setTimeout(f,0)有幾個很是重要的用途。它的一大應用是，能夠調整事件的發生順序。好比，網頁開發中，某個事件先發生在子元素，而後冒泡到父元素，即子元素的事件回調函數，會早於父元素的事件回調函數觸發。若是，咱們先讓父元素的事件回調函數先發生，就要用到setTimeout(f, 0)。

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事件會在瀏覽器接收文本以前觸發。所以，下面的回調函數是達不到目的的。

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

上面代碼想在用戶輸入文本後，當即將字符轉爲大寫。可是實際上，它只能將上一個字符轉爲大寫，由於瀏覽器此時還沒接收到文本，因此this.value取不到最新輸入的那個字符。只有用setTimeout改寫，上面的代碼才能發揮做用。

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

上面代碼將代碼放入setTimeout之中，就能使得它在瀏覽器接收到文本以後觸發。

因爲setTimeout(f,0)實際上意味着，將任務放到瀏覽器最先可得的空閒時段執行，因此那些計算量大、耗時長的任務，經常會被放到幾個小部分，分別放到setTimeout(f,0)裏面執行。

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(highlightNext, 50)的樣子，進行分塊處理。

正常任務與微任務

正常狀況下，JavaScript的任務是同步執行的，即執行完前一個任務，而後執行後一個任務。只有遇到異步任務的狀況下，纔會執行順序纔會改變。

這時，須要區分兩種任務：正常任務（task）與微任務（microtask）。它們的區別在於，「正常任務」在下一輪Event Loop執行，「微任務」在本輪Event Loop的全部任務結束後執行。

console.log(1);setTimeout(function() {console.log(2);}, 0);Promise.resolve().then(function() {console.log(3);}).then(function() {console.log(4);});console.log(5);// 1// 5// 3// 4// 2