JavaScript的setTimeout和setInterval的深入理解

myeveryheart 發(fā)布于2019-08-01 14:54 / 375人閱讀

摘要：所以其實(shí)和所謂的異步調(diào)用事實(shí)上是通過(guò)將代碼段插入到代碼的執(zhí)行隊(duì)列中實(shí)現(xiàn)的。當(dāng)執(zhí)行和的時(shí)候，會(huì)根據(jù)你設(shè)定的時(shí)間準(zhǔn)確地找到代碼的插入點(diǎn)。綜上所述，其實(shí)終歸是單線程產(chǎn)物。無(wú)論如何異步都不可能突破單線程這個(gè)障礙。

發(fā)表過(guò)一片博客《跟著我用JavaScript寫(xiě)計(jì)時(shí)器》,比較基礎(chǔ).....有網(wǎng)友說(shuō)應(yīng)該寫(xiě)一下setTimeout的原理和機(jī)制，嗯，今天就來(lái)寫(xiě)一下吧：

直奔主題：setTimeout和setInterval是如何工作的呢？

我們知道，js是單線程執(zhí)行的(單線程j就是說(shuō)在程序執(zhí)行時(shí)，所走的程序路徑按照連續(xù)順序排下來(lái)，前面的必須處理好，后面的才會(huì)執(zhí)行)。所以其實(shí)setTimeout和setInterval所謂的“異步調(diào)用”事實(shí)上是通過(guò)將代碼段插入到代碼的執(zhí)行隊(duì)列中實(shí)現(xiàn)的。
而如何計(jì)算插入的時(shí)間點(diǎn)呢？自然是要用到我們所說(shuō)的timer，也就是計(jì)時(shí)器。當(dāng)執(zhí)行setTimeout和setInterval的時(shí)候，timer會(huì)根據(jù)你設(shè)定的時(shí)間“準(zhǔn)確”地找到代碼的插入點(diǎn)。當(dāng)隊(duì)列“正常”地執(zhí)行到插入點(diǎn)時(shí)，就觸發(fā)timer callback，也就是我們?cè)O(shè)定的回調(diào)函數(shù)：

 
function fn() { 
/* 
here is some codes 
*/ alert("javascript");
setTimeout(function() {alert("ok!")},1000); 
} 
onload=fn;

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

還記得嗎？重新認(rèn)識(shí)所謂的“異步”

剛剛已經(jīng)知道，事實(shí)上setTimeout和setInterval只是簡(jiǎn)簡(jiǎn)單單地通過(guò)插入代碼到代碼隊(duì)列來(lái)實(shí)現(xiàn)代碼的延遲執(zhí)行（或者說(shuō)異步執(zhí)行）。但是事實(shí)上所謂的異步只是一個(gè)假象——它同樣運(yùn)行在一個(gè)線程上！始終是單線程！
那么問(wèn)題就來(lái)了，要是在代碼插入點(diǎn)前的代碼執(zhí)行時(shí)間超過(guò)了傳入setTimeout或setInterval的設(shè)定時(shí)間會(huì)怎樣呢？讓我們來(lái)看看這段代碼：

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

你覺(jué)得這段代碼的執(zhí)行結(jié)果是什么呢？答案是，alert永遠(yuǎn)不會(huì)出現(xiàn)。

這是為什么呢？因?yàn)椋瑆hile這段代碼沒(méi)有執(zhí)行完（如圖，瀏覽器一直在解析while的代碼），所以插入在后面的代碼便永遠(yuǎn)不會(huì)執(zhí)行。
綜上所述，其實(shí)JS終歸是單線程產(chǎn)物。無(wú)論如何“異步”都不可能突破單線程這個(gè)障礙。所以許多的“異步調(diào)用”（包括Ajax）事實(shí)上也只是“偽異步”而已。只要理解了這么一個(gè)概念，也許理解setTimeout和setInterval也就不難了。