setTimeout的理解

huashiou 發(fā)布于2019-08-20 18:19 / 2348人閱讀

摘要：是的，沒(méi)錯(cuò)是單線程的，但是會(huì)另開(kāi)一個(gè)線程，這個(gè)線程依賴于某個(gè)計(jì)時(shí)裝置，這時(shí)，其實(shí)是不管而繼續(xù)往下進(jìn)行的，而也是獨(dú)立的線程計(jì)時(shí)的。

setTimeout的運(yùn)行機(jī)制

先看下面一個(gè)例子：

這個(gè)代碼會(huì)讓瀏覽器陷入崩潰，為什么？
其實(shí)：
當(dāng)javascript運(yùn)行時(shí)遇到setTimeout后其實(shí)會(huì)另開(kāi)一條線程（剛剛不是說(shuō)javascript是單線程的嘛？）。是的，沒(méi)錯(cuò)javascript是單線程的，但是setTimeout會(huì)另開(kāi)一個(gè)線程，這個(gè)線程依賴于某個(gè)計(jì)時(shí)裝置，這時(shí)，javascript其實(shí)是不管setTimeout而繼續(xù)往下進(jìn)行的，而setTimeout也是獨(dú)立的線程計(jì)時(shí)的。而javascript在運(yùn)行完全部的代碼后會(huì)回過(guò)頭來(lái)重新檢測(cè)自己的隊(duì)列中有沒(méi)待執(zhí)行的命令或者函數(shù)，如果有就執(zhí)行，沒(méi)有就等待。直到有待執(zhí)行的命令被加載進(jìn)這個(gè)隊(duì)列中然后執(zhí)行。在這期間，setTimeout依賴的那個(gè)計(jì)時(shí)線程如果時(shí)間到了，那么它會(huì)把setTimeout中要執(zhí)行的函數(shù)或者命令傳送到j(luò)avascript的等待隊(duì)列中，等待javascript執(zhí)行完命令后回頭來(lái)檢測(cè)等待隊(duì)列中未執(zhí)行的函數(shù)或命令。
所以，在這里案例中，首先t變成true，然后javascript往下執(zhí)行，遇到了setTimeout，這時(shí)setTimeout啟用了另一個(gè)計(jì)時(shí)線程。此時(shí)javascript不管它跳過(guò)（因?yàn)樗闪硪粋€(gè)線程來(lái)控制）。然后遇到了while(t)這個(gè)循環(huán)，因?yàn)榍懊姘裻設(shè)置成了真，所以這個(gè)循環(huán)一直成立，所以也就一直循環(huán)下去。javascript的線程一直結(jié)束不了，所以無(wú)法回來(lái)檢查等待隊(duì)列，根本不會(huì)執(zhí)行setTimeout中代碼。所以t永遠(yuǎn)也無(wú)法變成假，而javascript也永遠(yuǎn)無(wú)法停止。

setTimeout的執(zhí)行順序

了解了setTimeout的運(yùn)行機(jī)制后我們來(lái)看看幾個(gè)setTimeout并列運(yùn)行它們的執(zhí)行順序由什么決定

setTimeout(function(){
console.log(3);
},5000);
setTimeout(function(){
console.log(5);
},3000);
setTimeout(function(){
console.log(6);
},14000);

結(jié)果是5,3,6。幾個(gè)都是setTimeout,因此都會(huì)放到等待隊(duì)列~~~
而這些隊(duì)列里的函數(shù)誰(shuí)先執(zhí)行呢？就是根據(jù)setTimeout里的第二個(gè)參數(shù)（延遲時(shí)間）決定的。
再看看一個(gè)復(fù)雜的例子如果setTimeout中嵌套了setTimeout 呢？

var d=[];
d[0]=function(){setTimeout(function(){console.log(3);setTimeout(function(){console.log(4)})})};
d[1]=function(){setTimeout(function(){console.log(5);setTimeout(function(){console.log(6)},0)},100)};
for(var i=0;i<2;i++){d[i]();}

這段代碼按順序打印的是 3,4,5,6 實(shí)際上是這樣主程序執(zhí)行完后遇到了兩個(gè)settimeout函數(shù) 第一個(gè)是0毫秒，第二是100毫秒先執(zhí)行第一個(gè)settimeout，打印出3，
第一個(gè)函數(shù)執(zhí)行的時(shí)候又遇見(jiàn)了一個(gè)settimeout 加入隊(duì)列等待時(shí)間是0，打印出了4，登到了100毫秒后第二個(gè)settimeout被執(zhí)行打印出5.又遇見(jiàn)一個(gè)settimeout，同樣被加入隊(duì)列等了0毫秒被執(zhí)行
再換換數(shù)據(jù)試一試：

var d=[];d[0]=function(){setTimeout(function(){console.log(3);setTimeout(function(){console.log(4)})})};
d[1]=function(){setTimeout(function(){console.log(5);setTimeout(function(){console.log(6)})},2)};
for(var i=0;i<2;i++){d[i]();}

這里的時(shí)間相差極短打印出的順序是3,5,4,6
如果再換一下數(shù)據(jù)：

var d=[];d[0]=function(){setTimeout(function(){console.log(3);setTimeout(function(){console.log(4)})})};
d[1]=function(){setTimeout(function(){console.log(5);setTimeout(function(){console.log(6)})},4)};
for(var i=0;i<2;i++){d[i]();}

這里相比上面的案例只是改了一個(gè)數(shù)字 2毫秒改成了4毫秒執(zhí)行順序變成 3,4,5,6
為什么？
因?yàn)樯厦娴陌咐龍?zhí)行完第一個(gè)settimeout之后過(guò)了2毫秒了超過(guò)了第二個(gè)函數(shù)的等待時(shí)間會(huì)立即執(zhí)行第二個(gè)settimeout。如果等待時(shí)間過(guò)大就不會(huì)這樣了
總之，只需記住一點(diǎn)：延遲時(shí)間始終是相對(duì)主程序執(zhí)行完畢的那個(gè)時(shí)間算的 ,并且多個(gè)setTimeout的先后順序也是由這個(gè)延遲時(shí)間決定的，如果遇到某個(gè)setTimeout需要花費(fèi)大量的時(shí)間怎么辦？可由于js是單線程，所以當(dāng)執(zhí)行到這個(gè)setTimeout后，會(huì)將這個(gè)程序執(zhí)行完成后再去執(zhí)行下一個(gè)setTimeout,無(wú)論下一個(gè)setTimeout的延遲時(shí)間為多少，如果這兩個(gè)setTimeout時(shí)間的差值小于第一個(gè)setTimeout消耗的時(shí)間，程序會(huì)等待這個(gè)setTimeout執(zhí)行完成后立即執(zhí)行下一個(gè)setTimeout,如果差值大于消耗的時(shí)間，就按照和主程序約定的延遲（setTimeout里的第二個(gè)參數(shù)）執(zhí)行即可