最新寫(xiě)代碼中時(shí)，看到項(xiàng)目中有人用到了 setTimeout(fun,0)，于是想總結(jié)一下。個(gè)人理解，如果有錯(cuò)誤的地方還請(qǐng)指出。THX

　　要想理解JavaScript的定時(shí)器是如何工作的，先要明白 JavaScript 引擎是單線程的。這個(gè)可以理解為 javascript 引擎是一個(gè)服務(wù)員，它有一個(gè)服務(wù)的隊(duì)列，所有的界面元素事件,定時(shí)觸發(fā)器回調(diào)，異步請(qǐng)求回調(diào)都要在這個(gè)任務(wù)隊(duì)列里排隊(duì)，等待處理。所有任務(wù)都是一個(gè)最小單位，不會(huì)中斷處理。這樣就可以理解 setTimeout(fun,0) 了，它并不是代表立即執(zhí)行該代碼，除非任務(wù)隊(duì)列為空(事實(shí)上，各個(gè)瀏覽器在實(shí)際執(zhí)行這個(gè)的時(shí)候也是有差異了，比較新的瀏覽器實(shí)際可能是在4ms；老版本的可能更長(zhǎng)一點(diǎn)，16ms也是可能的)。而 setTimeout(fun,time) 的意思就是多少時(shí)間后將 fun 回調(diào)加到這個(gè)任務(wù)隊(duì)列中，也就是至少需要time時(shí)間才會(huì)執(zhí)行fun。

　　舉個(gè)例子：

setTimeout(function () {
 console.log(1);
}, 0);
var tem = 0;
for (var i = 1; i < 1000000; i++) {
 tem += i;
};
console.log(2);

顯示結(jié)果為

　　就是說(shuō)，在執(zhí)行 setTimeout 時(shí)，將 function 回調(diào)加入了任務(wù)隊(duì)列，但并沒(méi)有立即執(zhí)行，因?yàn)閖s引擎還在忙著處理當(dāng)前的js，而只在這段代碼段執(zhí)行完才去任務(wù)列表里取新的任務(wù)，所以結(jié)果就是先顯示 2 后顯示 1。

　　setInterval(fun, time)方法是，每隔一定時(shí)間將fun添加到隊(duì)列中，那么問(wèn)題來(lái)，如果fun執(zhí)行時(shí)間比 time 要長(zhǎng)的時(shí)候怎么辦？

　　看一段代碼

var num = 0;
var time = setInterval(function () {
 var tem = 0;
 for (var i = 1; i < 99999999; i++) {
 tem += i;
 };
 num ++;
 console.log(num);
}, 100);

setTimeout(function (){
 clearInterval(time);
}, 1000);

　　意思是每隔100ms執(zhí)行一段代碼，在1s中后清除這個(gè)定時(shí)器。但是結(jié)果呢？

　　顯示結(jié)果為

　　也就是說(shuō)，事實(shí)上，并沒(méi)有執(zhí)行到那么多次數(shù)。也就是說(shuō)某些間隔會(huì)被跳過(guò)，這也就存在多個(gè)代碼執(zhí)行的間隔可能會(huì)比預(yù)期的小。原來(lái)在將定時(shí)器代碼加入隊(duì)列的時(shí)候，如果該定時(shí)器的代碼實(shí)例存在時(shí)，該次定時(shí)器代碼會(huì)被跳過(guò)。

　　引用一張圖片，就很好理解了。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

最新評(píng)論