快捷導(dǎo)航

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

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

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

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

 
<!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> 

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

1-2）通過點擊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> 

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

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

您可能感興趣的文章: