JavaScript提供定時執行代碼的功能,叫作定時器(timer),主要由setTimeout()和setInterval()這兩個函數來完成。它們向任務隊列添加定時任務。初始接觸它的人都以爲好簡單,實時上真的如此麼?這裏記載下,一路對其使用姿式變遷的歷程。javascript
setTimeout函數用來指定某個函數或某段代碼,在多少毫秒以後執行。它返回一個整數,表示定時器的編號,之後能夠用來取消這個定時器。html5
1 |
var timerId = setTimeout(func|code, delay) |
上面代碼中,setTimeout函數接受兩個參數,第一個參數func|code是將要推遲執行的函數名或者一段代碼,第二個參數delay是推遲執行的毫秒數。java
1 |
console.log(1); |
上面代碼的輸出結果就是1,3,2,由於setTimeout指定第二行語句推遲1000毫秒再執行(若是這在Sublime下運用插件以nodejs環境來執行,許解釋器不一樣,會報錯)。node
須要注意的是,推遲執行的代碼必須以字符串的形式,放入setTimeout,由於引擎內部使用eval函數,將字符串轉爲代碼。若是推遲執行的是函數,則能夠直接將函數名,放入setTimeout。一方面eval函數有安全顧慮,另外一方面爲了便於JavaScript引擎優化代碼,setTimeout方法通常老是採用函數名的形式,就像下面這樣。web
1 |
function func(){ |
除了前兩個參數,setTimeout還容許添加更多的參數。它們將被傳入推遲執行的函數(回調函數)。ajax
1 |
setTimeout(function(a,b){ |
上面代碼中,setTimeout共有4個參數。最後那兩個參數,將在1000毫秒以後回調函數執行時,做爲回調函數的參數。後端
IE 9.0及如下版本,只容許setTimeout有兩個參數,不支持更多的參數;能夠在匿名函數中,讓回調函數帶參數運行,再把匿名函數輸入setTimeout;例如:瀏覽器
1 |
setTimeout(function() { |
固然也可使用bind或apply方法來解決。安全
例如使用bind方法,把多餘的參數綁定在回調函數上面,生成一個新的函數輸入setTimeout。
1 |
setTimeout( function(arg1){}.bind(undefined, 10), 1000 ); |
上面代碼中,bind方法第一個參數是undefined,表示將原函數的this綁定全局做用域,第二個參數是要傳入原函數的參數。它運行後會返回一個新函數,該函數不帶參數。
setTimeout()中回調函數中的this
若是被setTimeout推遲執行的回調函數是某個對象的方法,那麼該方法中的this關鍵字將指向全局環境,而不是定義時所在的那個對象。
1 |
var x = 1; |
上面代碼輸出的是1,而不是2,這表示o.y的this所指向的已經不是o,而是全局環境了。
再看一個不容易發現錯誤的例子。
1 |
function User(login) { |
上面代碼只會顯示undefined,由於等到user.sayHi執行時,它是在全局對象中執行,因此this.login取不到值。
爲了防止出現這個問題,一種解決方法是將user.sayHi放在匿名函數中執行。
1 |
setTimeout(function() { |
上面代碼中,sayHi是在user做用域內執行,而不是在全局做用域內執行,因此可以顯示正確的值。
另外一種解決方法是,使用bind方法,將綁定sayHi綁定在user上面。
1 |
setTimeout(user.sayHi.bind(user), 1000); |
HTML 5標準規定,setTimeout的最短期間隔是4毫秒。爲了節電,對於那些不處於當前窗口的頁面,瀏覽器會將時間間隔擴大到1000毫秒。另外,若是筆記本電腦處於電池供電狀態,Chrome和IE 9以上的版本,會將時間間隔切換到系統定時器,大約是15.6毫秒。
setTimeout執行回調間隔時間長度
若是你在一段代碼中發現下面內容:
1 |
var startTime = new Date(); |
請問最後打印的是多少?其正確答案是,取決於後面同步執行的js須要佔用多少時間。
即爲:MAX(同步執行的時間, 100);緣何如此,就得看下setTimeout運行機制了。
setTimeout和setInterval的運行機制是,將指定的代碼移出本次執行,等到下一輪Event Loop時,再檢查是否到了指定時間。若是到了,就執行對應的代碼;若是不到,就等到再下一輪Event Loop時從新判斷。這意味着,setTimeout指定的代碼,必須等到本次執行的全部代碼都執行完,纔會執行。
每一輪Event Loop時,都會將「任務隊列」中須要執行的任務,一次執行完。setTimeout和setInterval都是把任務添加到「任務隊列」的尾部。所以,它們實際上要等到當前腳本的全部同步任務執行完,而後再等到本次Event Loop的「任務隊列」的全部任務執行完,纔會開始執行。因爲前面的任務到底須要多少時間執行完,是不肯定的,因此沒有辦法保證,setTimeout和setInterval指定的任務,必定會按照預約時間執行。
1 |
setTimeout(someTask,100); |
上面代碼的setTimeout,指定100毫秒之後運行一個任務。可是,若是後面當即運行的任務(當前腳本的同步任務))很是耗時,過了100毫秒還沒法結束,那麼被推遲運行的someTask就只有等着,等到前面的veryLongTask運行結束,才輪到它執行。
在使用backbone框架寫代碼的時候,由於些需求因素,新手總會在render時操縱下dom,卻發現改變dom元素狀態,代碼沒有問題,界面卻沒有變動。而使用setTimeout(func,time)卻能解決這個問題,即使time=0;探究一番,真相只有一個:
運行下面代,func1和func2誰會先執行?很明顯func2先執行;
1 |
setTimeout(function () { |
setTimeout的做用是將代碼推遲到指定時間執行,若是指定時間爲0,即setTimeout(f,0),那麼會馬上執行嗎?
答案是不會。由於setTimeout運行機制說過,必需要等到當前腳本的同步任務和「任務隊列」中已有的事件,所有處理完之後,纔會執行setTimeout指定的任務。也就是說,setTimeout的真正做用是,在「任務隊列」的現有事件的後面再添加一個事件,規定在指定時間執行某段代碼。setTimeout添加的事件,會在下一次Event Loop執行。
setTimeout(f,0)將第二個參數設爲0,做用是讓f在現有的任務(腳本的同步任務和「任務隊列」中已有的事件)一結束就馬上執行。也就是說,setTimeout(f,0)的做用是,儘量早地執行指定的任務。
1 |
setTimeout(function (){ |
上面代碼的含義是,儘量早地顯示「你好!」。
setTimeout(f,0)指定的任務,最先也要到下一次Event Loop纔會執行。請看下面的例子。
1 |
setTimeout(function() { |
上面代碼說明,setTimeout(f,0)必需要等到當前腳本的全部同步任務結束後纔會執行。
0毫秒實際上達不到的。根據HTML5標準,setTimeOut推遲執行的時間,最少是4毫秒。若是小於這個值,會被自動增長到4。這是爲了防止多個setTimeout(f,0)語句連續執行,形成性能問題。
另外一方面,瀏覽器內部使用32位帶符號的整數,來儲存推遲執行的時間。這意味着setTimeout最多隻能推遲執行2147483647毫秒(24.8天),超過這個時間會發生溢出,致使回調函數將在當前任務隊列結束後當即執行,即等同於setTimeout(f,0)的效果。
setTimeout(f,0)有幾個很是重要的用途。它的一大應用是,能夠調整事件的發生順序。好比,網頁開發中,某個事件先發生在子元素,而後冒泡到父元素,即子元素的事件回調函數,會早於父元素的事件回調函數觸發。若是,咱們先讓父元素的事件回調函數先發生,就要用到setTimeout(f, 0)。
1 |
var input = document.getElementsByTagName('input[type=button]')[0]; |
上面代碼在點擊按鈕後,先觸發回調函數A,而後觸發函數C。在函數A中,setTimeout將函數B推遲到下一輪Loop執行,這樣就起到了,先觸發父元素的回調函數C的目的了。
用戶自定義的回調函數,一般在瀏覽器的默認動做以前觸發。好比,用戶在輸入框輸入文本,keypress事件會在瀏覽器接收文本以前觸發。所以,下面的回調函數是達不到目的的。
1 |
document.getElementById('input-box').onkeypress = function(event) { |
上面代碼想在用戶輸入文本後,當即將字符轉爲大寫。可是實際上,它只能將上一個字符轉爲大寫,由於瀏覽器此時還沒接收到文本,因此this.value取不到最新輸入的那個字符。只有用setTimeout改寫,上面的代碼才能發揮做用。
1 |
document.getElementById('my-ok').onkeypress = function() { |
上面代碼將代碼放入setTimeout之中,就能使得它在瀏覽器接收到文本以後觸發;原來如此:這也就解釋了緣何在使用backbone調用render之時,操縱dom是無效的了,由於當時連dom元素都還沒獲取到(爲什麼沒報錯?這牽扯到另外一個話題),天然等頁面渲染完畢了也沒見想要的結果了。
衆所周知javascript是單線程的,特色就是容易出現阻塞。若是一段程序處理時間很長,很容易致使整個頁面hold住。什麼交互都處理不了怎麼辦?
簡化複雜度?複雜邏輯後端處理?html5的多線程?……
上面都是ok的作法,可是setTimeout也是處理這種問題的一把好手。setTimeout一個很關鍵的用法就是分片,若是一段程序過大,咱們能夠拆分紅若干細小的塊。因爲setTimeout(f,0)實際上意味着,將任務放到瀏覽器最先可得的空閒時段執行,因此那些計算量大、耗時長的任務,經常會被放到幾個小部分,分別放到setTimeout(f,0)裏面執行(分片塞入隊列),這樣即便在複雜程序沒有處理完時,咱們操做頁面,也是能獲得即時響應的。其實就是將交互插入到了複雜程序中執行。
1 |
var div = document.getElementsByTagName('div')[0]; |
上面代碼有兩種寫法,都是改變一個網頁元素的背景色。寫法一會形成瀏覽器「堵塞」,而寫法二就能就不會,這就是setTimeout(f,0)的好處。即:可利用setTimeout實現一種僞多線程的概念。
另外一個使用這種技巧的例子是,代碼高亮的處理。若是代碼塊很大,就會分紅一個個小塊,寫成諸如setTimeout(highlightNext, 50)的樣子,進行分塊處理。
setTimeout和setInterval函數,都返回一個表示計數器編號的整數值,將該整數傳入clearTimeout和clearInterval函數,就能夠取消對應的定時器。
1 |
var id1 = setTimeout(f,1000); |
setTimeout和setInterval返回的整數值是連續的(必定環境下,好比瀏覽器控制檯,或者js執行環境等),也就是說,第二個setTimeout方法返回的整數值,將比第一個的整數值大1。利用這一點,能夠寫一個函數,取消當前全部的setTimeout。
1 |
(function() { |
運行上面代碼後,實際上再設置任何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 |
function debounce(fn, delay){ |
現實中,最好不要設置太多個setTimeout和setInterval,它們耗費CPU。比較理想的作法是,將要推遲執行的代碼都放在一個函數裏,而後只對這個函數使用setTimeout或setInterval。
對setTimeout天然不止於這些,但已足見其強大。那麼問題來了,須要在項目中大量使用麼?視我的和項目而定吧;如不能熟練掌握,不建議多用。畢竟在某些情景之下,setTimeout做爲一個hack的方式而存在的(打亂模塊的生命週期,而且在問題出現時很難調試,你懂的),譬如:當一個實例尚未初始化的前,咱們就使用這個實例,錯誤的解決辦法是使用實例時加個setTimeout,確保實例使用前已初始化。
但只要足夠熟悉它,以及使用的場景(包括模塊生命週期),使用它也就無可厚非了。好比underscore中很多方法也是基於這setTimeout方法寫的;好比很是強大的_.defer
: 延遲調用function直到當前調用棧清空爲止,相似使用延時爲0的setTimeout方法。對於執行開銷大的計算和無阻塞UI線程的HTML渲染時候很是有用。 若是傳遞arguments參數,當函數function執行時, arguments 會做爲參數傳入。
也好比前文提到的防抖動方法debounce_.debounce(function, wait, [immediate]) ;在underscore中其實現方法以下:
1 |
_.debounce = function(func, wait, immediate) { |
參考文章連接: 阮一峯-javaScript標準參考教程