建站
咨詢
售后
建站咨詢
新聞中心
從基礎(chǔ)的層面來講，理解JavaScript的定時器是如何工作的是非常重要的。定時器的執(zhí)行常常和我們的直觀想象不同，那是因?yàn)镴avaScript引擎是單線程的。我們先來認(rèn)識一下下面三個函數(shù)是如何控制計(jì)時器的。
創(chuàng)新互聯(lián)建站專注于成都網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對待客戶，用專業(yè)的服務(wù)創(chuàng)造價值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。
推薦閱讀：雕蟲無小技 JavaScript初學(xué)者的10個迷你技巧
- var id = setTimeout(fn, delay);
初始化一個計(jì)時器，然后在指定的時間間隔后執(zhí)行。該函數(shù)返回一個唯一的標(biāo)志ID（Number類型），我們可以使用它來取消計(jì)時器。
- var id = setInterval(fn, delay);
和setTimeout有些類似，但它是連續(xù)調(diào)用一個函數(shù)（時間間隔是delay參數(shù)）直到它被取消。
- clearInterval(id);, clearTimeout(id);
使用計(jì)時器ID（setTimeout 和 setInterval的返回值）來取消計(jì)時器回調(diào)的發(fā)生。
為了理解計(jì)時器的內(nèi)在執(zhí)行原理，有一個重要的概念需要加以探討：計(jì)時器的延遲(delay)是無法得到保障的。由于所有JavaScript代碼是在一個線程里執(zhí)行的，所有異步事件（例如，鼠標(biāo)點(diǎn)擊和計(jì)時器）只有擁有執(zhí)行機(jī)會時才會執(zhí)行。用一個很好的圖表加以說明：
在這個圖表中有許多信息需要理解，如果完全理解了它們，你會對JavaScript引擎如何實(shí)現(xiàn)異步事件有一個很好的認(rèn)識。這是一個一維的圖標(biāo)：垂直方向表示時間，藍(lán)色的區(qū)塊表示JavaScript代碼執(zhí)行塊。例如***個JavaScript代碼執(zhí)行塊需要大約18ms，鼠標(biāo)點(diǎn)擊所觸發(fā)的代碼執(zhí)行塊需要11ms等等。
由于JavaScript引擎同一時間只執(zhí)行一條代碼（這是由于JavaScript單線程的性質(zhì)），所以每一個JavaScript代碼執(zhí)行塊會“阻塞”其它異步事件的執(zhí)行。這就意味著當(dāng)一個異步事件發(fā)生（例如，鼠標(biāo)點(diǎn)擊，計(jì)時器被觸發(fā)，或者Ajax異步請求）后，這些事件的回調(diào)函數(shù)將排在執(zhí)行隊(duì)列的***等待執(zhí)行（實(shí)際上，排隊(duì)的方式根據(jù)瀏覽器的不同而不同，所以這里只是一個簡化）；
從***個JavaScript執(zhí)行塊開始研究，在***個執(zhí)行塊中兩個計(jì)時器被初始化：一個10ms的setTimeout()和一個10ms的setInterval()。依據(jù)何時何地計(jì)時器被初始化(計(jì)時器初始化完畢后就會開始計(jì)時)，計(jì)時器實(shí)際上會在***個代碼塊執(zhí)行完畢前被觸發(fā)。但是，計(jì)時器上綁定的函數(shù)不會立即執(zhí)行（不被立即執(zhí)行的原因是JavaScript是單線程的）。實(shí)際上，被延遲的函數(shù)將依次排在執(zhí)行隊(duì)列的***，等待下一次恰當(dāng)?shù)臅r間再執(zhí)行。
此外，在***個JavaScript執(zhí)行塊中我們看到了一個“鼠標(biāo)點(diǎn)擊”事件發(fā)生了。一個JavaScript回調(diào)函數(shù)綁定在這個異步事件上了（我們從來不知道用戶什么時候執(zhí)行這個（點(diǎn)擊）事件，因此認(rèn)為它是異步的），這個函數(shù)不會被立即執(zhí)行，和上面的計(jì)時器一樣，它將排在執(zhí)行隊(duì)列的***，等待下一次恰當(dāng)?shù)臅r候執(zhí)行。
當(dāng)***個JavaScript執(zhí)行塊執(zhí)行完畢后，瀏覽器會立即問一個問題：哪個函數(shù)（語句）在等待被執(zhí)行？在這時，一個“鼠標(biāo)點(diǎn)擊事件處理函數(shù)”和一個“計(jì)時器回調(diào)函數(shù)”都在等待執(zhí)行。瀏覽器會選擇一個（實(shí)際上選擇了“鼠標(biāo)點(diǎn)擊事件的處理函數(shù)”，因?yàn)橛蓤D可知它是先進(jìn)隊(duì)的）立即執(zhí)行。而“計(jì)時器回調(diào)函數(shù)”將等待下次適合的時間執(zhí)行。
注意，當(dāng)“鼠標(biāo)點(diǎn)擊事件處理函數(shù)”執(zhí)行的時候，setInterval的回調(diào)函數(shù)***次被觸發(fā)了。和setTimeout的回調(diào)函數(shù)一樣，它將排到執(zhí)行隊(duì)列的***等待執(zhí)行。但是，一定要注意這一點(diǎn)：當(dāng)setInterval回調(diào)函數(shù)第二次被觸發(fā)時（此時setTimeout函數(shù)仍在執(zhí)行）setTimeout的***次觸發(fā)將被拋棄掉。當(dāng)一個很長的代碼塊在執(zhí)行時，可能把所有的setInterval回調(diào)函數(shù)都排在執(zhí)行隊(duì)列的后面，代碼塊執(zhí)行完之后，結(jié)果便會是一大串的setInterval回調(diào)函數(shù)等待執(zhí)行，并且這些函數(shù)之間沒有間隔，直到全部完成。所以，瀏覽器傾向于的當(dāng)沒有更多interval的處理函數(shù)在排隊(duì)時再將下一個處理函數(shù)排到隊(duì)尾(這是由于間隔的問題)。
我們能夠發(fā)現(xiàn)，當(dāng)?shù)谌齻€setInterval回調(diào)函數(shù)被觸發(fā)時，之前的setInterval回調(diào)函數(shù)仍在執(zhí)行。這就說明了一個很重要的事實(shí)：setInterval不會考慮當(dāng)前正在執(zhí)行什么，而把所有的堵塞的函數(shù)排到隊(duì)列尾部。這意味著兩次setInterval回調(diào)函數(shù)之間的時間間隔會被犧牲掉（縮減）。
***，當(dāng)?shù)诙€setInterval回調(diào)函數(shù)執(zhí)行完畢后，我們可以看到?jīng)]有任何程序等待JavaScript引擎執(zhí)行了。這就意味著瀏覽器現(xiàn)在在等待一個新的異步事件的發(fā)生。在50ms時一個新的setInterval回調(diào)函數(shù)再次被觸發(fā)，這時，沒有任何的執(zhí)行塊阻塞它的執(zhí)行了。所以它會立刻被執(zhí)行。讓我們用一個例子來闡明setTimeout和setInterval之間的區(qū)別：
- setTimeout(function(){
- /* Some long block of code... */
- setTimeout(arguments.callee, 10);
- }, 10);
- setInterval(function(){
- /* Some long block of code... */
- }, 10);
- setTimeout(function(){
- /* Some long block of code... */
- setTimeout(arguments.callee, 10);
- }, 10);
- setInterval(function(){
- /* Some long block of code... */
- }, 10);
這兩句代碼乍一看沒什么差別，但是它們是不同的。setTimeout回調(diào)函數(shù)的執(zhí)行和上一次執(zhí)行之間的間隔至少有10ms（可能會更多，但不會少于10ms），而setInterval的回調(diào)函數(shù)將嘗試每隔10ms執(zhí)行一次，不論上次是否執(zhí)行完畢。
總結(jié)
◆JavaScript引擎是單線程的，強(qiáng)制所有的異步事件排隊(duì)等待執(zhí)行；
◆setTimeout和 setInterval在執(zhí)行異步代碼的時候有著根本的不同；
◆如果一個計(jì)時器被阻塞而不能立即執(zhí)行，它將延遲執(zhí)行直到下一次可能執(zhí)行的時間點(diǎn)才被執(zhí)行（比期望的時間間隔要長些）；
◆如果setInterval回調(diào)函數(shù)的執(zhí)行時間將足夠長（比指定的時間間隔長），它們將連續(xù)執(zhí)行并且彼此之間沒有時間間隔。
上述這些知識點(diǎn)都是非常重要的。了解了JavaScript引擎是如何工作的，尤其是大量的異步事件（連續(xù)）發(fā)生時，才能為構(gòu)建高級應(yīng)用程序打好基礎(chǔ)。
原文作者：John Resig
原文鏈接： http://ejohn.org/blog/how-javascript-timers-work/
文章題目：JavaScrip單線程引擎工作原理
標(biāo)題來源：http://www.5511xx.com/article/cceiodc.html
