setTimeout和setInterval的區(qū)別你真的了解嗎?

更新時(shí)間：2011年03月31日 00:28:01 作者：

setTimeout和setInterval這兩個(gè)函數(shù), 大家肯定都不陌生, 但可能并不是每個(gè)用過(guò)這兩個(gè)方法的同學(xué), 都了解其內(nèi)部的實(shí)質(zhì)

甚至可能會(huì)錯(cuò)誤的把兩個(gè)實(shí)現(xiàn)定時(shí)調(diào)用的函數(shù)理解成了類(lèi)似thread一樣的東西, 認(rèn)為會(huì)在一個(gè)時(shí)間片內(nèi), 并發(fā)的執(zhí)行調(diào)用的函數(shù), 似乎很好很強(qiáng)大, 但其實(shí)并不是如此, 實(shí)際的情況是javascript都是以單線程的方式運(yùn)行于瀏覽器的javascript引擎中的, setTimeout和setInterval的作用只是把你要執(zhí)行的代碼在你設(shè)定的一個(gè)時(shí)間點(diǎn)插入js引擎維護(hù)的一個(gè)代碼隊(duì)列中, 插入代碼隊(duì)列并不意味著你的代碼就會(huì)立馬執(zhí)行的,理解這一點(diǎn)很重要. 而且setTimeout和setInterval還有點(diǎn)不一樣.

先談?wù)剆etTimeout

復(fù)制代碼代碼如下:

 
function click() { 
// code block1... 
setTimeout(function() { 
// process ... 
}, 200); 
// code block2 
} 

假設(shè)我們給一個(gè)button的onclick事件綁定了此方法, 當(dāng)我們按下按鈕后, 肯定先執(zhí)行block1的內(nèi)容, 然后運(yùn)行到setTimeout的地方, setTimeout會(huì)告訴瀏覽器說(shuō), "200ms后我會(huì)插一段要執(zhí)行的代碼給你的隊(duì)列中", 瀏覽器當(dāng)然答應(yīng)了(注意插入代碼并不意味著立馬執(zhí)行), setTimeout代碼運(yùn)行后, 緊跟其后的block2代碼開(kāi)始執(zhí)行, 這里就開(kāi)始說(shuō)明問(wèn)題了, 如果block2的代碼執(zhí)行時(shí)間超過(guò)200ms, 那結(jié)果會(huì)是如何? 或許按照你之前的理解, 會(huì)理所當(dāng)然的認(rèn)為200ms一到, 你的process代碼會(huì)立馬執(zhí)行...事實(shí)是, 在block2執(zhí)行過(guò)程中(執(zhí)行了200ms后)process代碼被插入代碼隊(duì)列, 但一直要等click方法執(zhí)行結(jié)束, 才會(huì)執(zhí)行process代碼段, 從代碼隊(duì)列上看process代碼是在click后面的, 再加上js以單線程方式執(zhí)行, 所以應(yīng)該不難理解. 如果是另一種情況, block2代碼執(zhí)行的時(shí)間<200ms, setTimeout在200ms后將process代碼插入到代碼隊(duì)列, 而那時(shí)執(zhí)行線程可能已經(jīng)處于空閑狀態(tài)了(idle), 那結(jié)果就是200ms后, process代碼插入隊(duì)列就立馬執(zhí)行了, 就讓你感覺(jué)200ms后, 就執(zhí)行了.
再看看setInterval
這里可能會(huì)存在兩個(gè)問(wèn)題:
1.時(shí)間間隔或許會(huì)跳過(guò)
2.時(shí)間間隔可能<定時(shí)調(diào)用的代碼的執(zhí)行時(shí)間

復(fù)制代碼代碼如下:

 
function click() { 
// code block1... 
setInterval(function() { 
// process ... 
}, 200); 
// code block2 
} 

和上面一樣我們假設(shè)通過(guò)一個(gè)click, 觸發(fā)了setInterval以實(shí)現(xiàn)每隔一個(gè)時(shí)間段執(zhí)行process代碼

比如onclick要300ms執(zhí)行完, block1代碼執(zhí)行完, 在5ms時(shí)執(zhí)行setInterval, 以此為一個(gè)時(shí)間點(diǎn), 在205ms時(shí)插入process代碼, click代碼順利結(jié)束, process代碼開(kāi)始執(zhí)行(相當(dāng)于圖中的timer code), 然而process代碼也執(zhí)行了一個(gè)比較長(zhǎng)的時(shí)間, 超過(guò)了接下來(lái)一個(gè)插入時(shí)間點(diǎn)405ms, 這樣代碼隊(duì)列后又插入了一份process代碼, process繼續(xù)執(zhí)行著, 而且超過(guò)了605ms這個(gè)插入時(shí)間點(diǎn), 下面問(wèn)題來(lái), 可能你還會(huì)認(rèn)為代碼隊(duì)列后面又會(huì)繼續(xù)插入一份process代碼...真實(shí)的情況是,由于代碼隊(duì)列中已經(jīng)有了一份未執(zhí)行的process代碼, 所以605ms這個(gè)插入時(shí)間點(diǎn)將會(huì)被"無(wú)情"的跳過(guò), 因?yàn)閖s引擎只允許有一份未執(zhí)行的process代碼, 說(shuō)到這里不知道您是不是會(huì)豁然開(kāi)朗呢...

為了這種情況你可以用一種更好的代碼形式

復(fù)制代碼代碼如下:

 
setTimeout(function(){ 
//processing 
setTimeout(arguments.callee, interval); 
}, interval); 

這個(gè)估計(jì)稍微想一下, 就明白其中的好處了, 這樣就不會(huì)產(chǎn)生時(shí)間點(diǎn)被跳過(guò)的問(wèn)題內(nèi)容就到這里, 希望能有所幫助, 可能我表達(dá)的不是很清楚如果覺(jué)得自己英語(yǔ)基礎(chǔ)不錯(cuò)可以直接看

里有關(guān)advanced Timers這節(jié)內(nèi)容, 個(gè)人認(rèn)為這本書(shū)真的很不錯(cuò), 無(wú)論是想從零學(xué)起, 還是平日沒(méi)事翻翻參考參考都很不錯(cuò), 作者是yahoo里很牛的一位前端開(kāi)發(fā)工程師 : )