快捷導(dǎo)航

setTimeout的延時(shí)為0時(shí)多個(gè)瀏覽器的區(qū)別

更新時(shí)間：2012年05月23日 18:54:39 作者：

一直比較迷惑：js的setTimeout到底會(huì)在什么時(shí)候執(zhí)行，如果執(zhí)行了，和主執(zhí)行腳本到底差多長(zhǎng)時(shí)間

由于不是很了解瀏覽器的內(nèi)部執(zhí)行策略，本文只能是通過(guò)前端一些測(cè)試依稀猜測(cè)些結(jié)論：
1）測(cè)試舉例
做了兩個(gè)例子：
1-1）腳本在頁(yè)面中直接執(zhí)行，通過(guò)刷新看結(jié)果

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

 
<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<script type="text/javascript"> 
var t=new Date; 
setTimeout(function(){ 
alert('cost time:'+(new Date-t)) 
},0); 
</script> 
</HEAD> 
<BODY> 
</BODY> 
</HTML> 

測(cè)試結(jié)果：　
　
　　在ie各個(gè)版本瀏覽器下，得到的alert結(jié)果大體為：14左后，區(qū)間為8~21毫秒之間；
　　chrome19，基本為1，區(qū)間為1~5之間，但是偶爾會(huì)是15左右
　　firefox12，基本為3，區(qū)間為2~7之間，但是偶爾也有15左右的值
　　safari5.1，基本為4，區(qū)間為1~7之間，但是偶爾也有15左右的值
　　opera11.5，基本為5，區(qū)間為2~8之間，但是偶爾有很大值

1-2）通過(guò)點(diǎn)擊div看結(jié)果

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

 
<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<script type="text/javascript"> 
function test(){ 
var t=new Date; 
setTimeout(function(){ 
alert('cost time:'+(new Date-t)) 
},0); 
} 
</script> 
</HEAD> 
<BODY> 
<div onclick='test()' id="div1" style="position:relative;width:200px;height:200px;background-color:green;left:100px;top:100px;"> 
</div> 
</BODY> 
</HTML> 

測(cè)試結(jié)果：　　
　　在ie各個(gè)版本瀏覽器下，得到的alert結(jié)果大體為：5左后，偶爾有大值；
　　chrome19，基本為2，偶爾為3
　　firefox12，基本為1,0,2，但是偶爾也有13左右的值
　　safari5.1，基本為1，偶爾為2和3
　　opera11.5，基本為4,3，，但是偶爾有12左右的值。
　
　　以上測(cè)試，均在打開(kāi)多個(gè)干擾復(fù)雜頁(yè)面的標(biāo)簽、單個(gè)標(biāo)簽中測(cè)試。結(jié)果差不多。
2）說(shuō)明什么？　
　　其實(shí)也得不到什么結(jié)論，但是測(cè)試結(jié)果基本反映了當(dāng)前流行瀏覽器js腳本的效率排名。
　　究其原因，可能得出一些印證：
　　2-1)由于js的主執(zhí)行線程為單線程，所以此值肯定一般大于0，setTimeout的執(zhí)行時(shí)間點(diǎn)只是加入js主執(zhí)行隊(duì)列中的時(shí)間點(diǎn)，至于什么時(shí)候執(zhí)行，是由js引擎線程按順序執(zhí)行的隊(duì)列來(lái)決定。此結(jié)論在很多處說(shuō)到?？勺孕胁殚啠?如：JavaScript可否多線程? 深入理解JavaScript定時(shí)機(jī)制）；
　　此結(jié)論也印證很火時(shí)候用setTimeout做動(dòng)畫不流暢的原因等。
　　順便在此貼出背光的一副圖很能說(shuō)明問(wèn)題：

3-2）測(cè)試偶爾的很大值，也有可能是js主執(zhí)行線程中做了其他事情，如GC等。因?yàn)榇笾抵貜?fù)出現(xiàn)幾率很少。
　
總結(jié)：其實(shí)我是沒(méi)有得出結(jié)論，只是好奇，然后猜測(cè)，看看可能是情況和結(jié)果，希望大家批評(píng)指正?；蛘哂薪Y(jié)論的答復(fù)我。
另外：setTimout函數(shù)中第二個(gè)參數(shù)如果為負(fù)數(shù)，則和0具有一樣的效果，如果setTimeout(function(){console.log('test')},-100);等同于setTimeout(function(){console.log('test')},0)。
我以為會(huì)報(bào)錯(cuò)，結(jié)果所有瀏覽器都沒(méi)有報(bào)錯(cuò)。

您可能感興趣的文章: