首頁 > web前端 > js教程 > 主體

JavaScript 計時器的工作原理

高洛峰
發布: 2016-11-25 09:15:14
原創
2299 人瀏覽過

看下面內容之前,看一小段程式碼,如果讀者能說出程式碼的用意,那就沒必要往下看了,因為你都懂。

setTimeout(function(){
/* Some long block of code… */
setTimeout(arguments.callee, 10);
}, 10);
setInterval(function(){
/* Some long block of code… */
}, 10);
登入後複製
登入後複製

計時器是一個很牛X的東西,但是很多人其實只限於知道它的語法,缺乏對其原理的認識。計時器透過設定一定的時間段(毫秒)來非同步的執行一段程式碼。因為 Javascript 是一個單線程語言,計時器提供了一種繞過這種語言限制來執行程式碼的能力。

今天就簡單的來說下計時器的工作原理。

JavaScript 提供了三個函數來建構和操作計時器

1 var id = setTimeout(fn, delay);

2 var id = setInterval(fn, delay);

3 clearIntervalout; id);

具體的文法我就不多說了,可以查手冊。為了了解計時器的工作原理,有一個概念必須記在心裡:時間延遲不能被保證。什麼意思,就是說你這樣寫setTimeout(fn, 500)並不代表fn肯定在500毫秒之後馬上就執行,延遲很可能會更長。因為JavaScript 是單執行緒語言,所有的非同步事件(包括計時器、滑鼠事件或一個XMLHttpRequest 完成)僅僅當程式執行期間​​有缺口的時候才會執行,不是你規定了什麼時候就什麼時候執行,要知道程序員不是萬能的,你寫的東西最後還是要看瀏覽器臉色的。

下面的這張圖片可以很好的說明問題,感謝 John Resig 大神。

JavaScript 計時器的工作原理

從上往下看,左面的數字代表時間(毫秒),右面的文字代表了一系列非同步事件的設定和觸發,中間則是程式碼區塊。最上面的JavaScript 程式碼區塊可能是你在瀏覽器載入的時候執行的片段,大概耗時18毫秒,緊接著下面的Mouse Click Callback 程式碼區塊可能是你一個滑鼠事件觸發時的回呼函數,大概耗時11毫秒,依序類推。

JavaScript 的單線程特性決定了每次只能執行一塊,所以當第一塊程式碼執行的時候(它一共運行了18毫秒),本身構造了兩個計時器,期間可能用戶還點了一下滑鼠(你有過在網頁一打開還沒載完就在那亂點的情況嗎)。照理說用戶點完滑鼠就應該馬上執行那個回呼函數,但是不行,JavaScript 執行只有一條道嘛,在那18毫秒沒跑完之前,其他程式碼區塊想執行就只能排隊,沒空間給你超車都。那兩個計時器都是10毫秒的延遲,從圖中可以看到,setTimeout也在那18毫秒執行結束之前觸發了,沒辦法也排隊吧。

終於,18毫秒後,天上一道神雷把前面的車直接劈成空氣了,後面兩個排隊的可以過去了,但是還得一個一個,不能並列,那誰先過去呢?是不是兩個人在那劃拳?不是的,瀏覽器說的算,瀏覽器說,滑鼠點選事件先過去,setTimeout只能繼續等11毫秒。注意看圖,在滑鼠事件回呼函數執行的時候,又一個計時器事件觸發了(setInterval),等著,而且必須排在setTimeout的後面。

11毫秒過去了,setTimeout 終於可以過去了,注意看,setInterval 的第二次觸發了,雖然它第一次都在排隊呢,如果這個時候還嚮往常一樣排隊,最後是什麼情況,setTimeout執行完了,就會連續執行兩個setInterval,你設定的延遲沒用了都。所以瀏覽器還是比較聰明的,它在處理setInterval的時候,如果發現已經有排隊的,就直接把新來的 Kill 掉。

接著看,輪到排隊的setInterval 第一次觸發開始執行了,它執行的時候,第三次觸發又到了,這次沒有排隊了,所以瀏覽器沒把它Kill 掉,給丫排隊的機會,所以你會發現這兩次的setInterval的執行沒有間隔的,如果你做一個投影片,遇到這種情況就要好好想想自己的程式碼是不是有問題了。

最後,再也沒有別的因素幹擾了 setInterval 了(如果用戶被 MM 叫走了),setInterval 就按照你想要的步驟執行了。

講到這裡,開頭的程式碼可以理解了吧。

setTimeout(function(){
/* Some long block of code… */
setTimeout(arguments.callee, 10);
}, 10);
setInterval(function(){
/* Some long block of code… */
}, 10);
登入後複製
登入後複製

這兩個函數看起來效果一樣,其實不然,第一個程式碼區塊總是會延遲10毫秒執行,雖然大多時候是大於10毫秒的。而第二個每到10毫秒就嘗試執行,不管先前的觸發執行了沒有。

總結起來四條

• JavaScript 引擎只有一個線程,它會迫使某些非同步事件排隊

• setTimeout 和setInterval 在執行非同步程式碼的時候有很大區別

• 假如一個計時器被阻止執行,它會等待知道遇到一個程式碼執行空隙,通常時間比預期的要長

• Intervals 可能會一個挨著一個執行,如果回調函數的執行時間大於間隔


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板