setTimeout和setInterval的深入理解

2019-11-20 21:45:11

字體：大中小

供稿：網(wǎng)友

大概半年前發(fā)表過一篇關(guān)于setTimeout和setInterval的文章，但是現(xiàn)在回去仔細(xì)一看發(fā)現(xiàn)其實(shí)存在很多不足以及錯誤。事實(shí)上，setTimeout和setInterval并沒有我們字面上理解的那么簡單。要真正掌握并理解這兩個方法，還得從javascript的單線程機(jī)制說起。

【開門見山】setTimeout和setInterval是如何工作的呢？
我們知道，js是單線程執(zhí)行的。所以其實(shí)setTimeout和setInterval所謂的“異步調(diào)用”事實(shí)上是通過將代碼段插入到代碼的執(zhí)行隊列中實(shí)現(xiàn)的。

而如何計算插入的時間點(diǎn)呢？自然是要用到我們所說的timer，也就是計時器。當(dāng)執(zhí)行setTimeout和setInterval的時候，timer會根據(jù)你設(shè)定的時間“準(zhǔn)確”地找到代碼的插入點(diǎn)。當(dāng)隊列“正常”地執(zhí)行到插入點(diǎn)時，就觸發(fā)timer callback，也就是我們設(shè)定的回調(diào)函數(shù)：

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

 
function fn() { 
/* 
here is some codes 
*/ 
setTimeout(function() {alert('ok!')},1000); 
} 

上面這個例子就是我們通常的用法，應(yīng)該容易理解。可是，timer真的能那么準(zhǔn)確么？代碼隊列的執(zhí)行真的能那么正常么？

【斬草除根】重新認(rèn)識所謂的“異步”
剛剛已經(jīng)知道，事實(shí)上setTimeout和setInterval只是簡簡單單地通過插入代碼到代碼隊列來實(shí)現(xiàn)代碼的延遲執(zhí)行（或者說異步執(zhí)行）。但是事實(shí)上所謂的異步只是一個假象――它同樣運(yùn)行在一個線程上！
那么問題就來了，要是在代碼插入點(diǎn)前的代碼執(zhí)行時間超過了傳入setTimeout或setInterval的設(shè)定時間會怎樣呢？讓我們來看看這段代碼：

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

 
function fn() { 
setTimeout(function(){alert('can you see me?');},1000); 
while(true) {} 
} 

你覺得這段代碼的執(zhí)行結(jié)果是什么呢？答案是，alert永遠(yuǎn)不會出現(xiàn)。
這是為什么呢？因為，while這段代碼沒有執(zhí)行完，插入在后面的代碼便永遠(yuǎn)不會執(zhí)行。
綜上所述，其實(shí)JS終歸是單線程產(chǎn)物。無論如何“異步”都不可能突破單線程這個障礙。所以許多的“異步調(diào)用”（包括Ajax）事實(shí)上也只是“偽異步”而已。只要理解了這么一個概念，也許理解setTimeout和setInterval也就不難了。

上一篇：javascript阻止scroll事件多次執(zhí)行的思路及實(shí)現(xiàn)

下一篇：如何獲取select下拉框的值(option沒有及有value屬性)