setTimeout與setInterval在不同瀏覽器下的差異

更新時間：2010年01月24日 15:48:59 作者：

setTimeout與setInterval是window對象的兩個非常神奇方法，用于實(shí)現(xiàn)定時或延時調(diào)用一個函數(shù)或一段代碼

。（新手可能認(rèn)為setTimeout與setInterval是javascript函數(shù)，這是錯誤的。新手容易將javascript對象函數(shù)與DOM對象方法混淆。）

先來一段代碼，大家猜猜在各種瀏覽器下的結(jié)果會是怎么樣的呢？

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

 
function f(){ 
var s = 'arguments.length:'+arguments.length+'; '; 
for(var i=0,n=arguments.length;i< n;i++){ 
s += ' ['+i+']:'+arguments[i]+'; '; 
} 
alert(s); 
} 
setTimeout(f,500,"javascript","AAA") 

我這里要探討的，不是什么時候該用哪一個，而是探討這兩個方法在各瀏覽器中的差異。
原先我一直沒覺得這兩個方法會有什么烏龍，一個偶然的機(jī)會讓我得知了，現(xiàn)在整理一下寫出來和大家分享。
因?yàn)閟etTimeout與setInterval的參數(shù)和用法是一樣的，只是功能不同，所以，為了省事，我下面只以setTimeout為例進(jìn)行說明以及舉例。
setTimeout被最經(jīng)常用到的形式大概是如下2種樣子的：

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

 
iTimerID = setTimeout(strJsCode, 50) //strJsCode為一個包含js代碼的字符串 
iTimerID = setTimeout(objFunction, 50) //objFunction為一個函數(shù)對象 

第一種調(diào)用方式是傳包含js代碼的字符串，這種方式的好處是簡潔，但壞處是運(yùn)行效率差，而且不利于語法解析，有潛在風(fēng)險，更重要的是，處理比較復(fù)雜的內(nèi)容比較費(fèi)勁，這一點(diǎn)和eval的弊端是一致的。
所以，我們認(rèn)為，通常應(yīng)當(dāng)采用第二種方式調(diào)用為好。（后面我的例子均采用第2種調(diào)用方式）

現(xiàn)在來揭曉開頭那一段代碼在各種瀏覽器下的結(jié)果：
IE(6,7,8)是： arguments.length:0;
Opera(6,7,8)是： arguments.length:2; [0]:javascript; [1]:AAA;
Firefox(3.0)是： arguments.length:3; [0]:javascript; [1]:AAA; [2]:-15;
竟然有這么大的差別，還真是“你唱你的曲，我哼我的調(diào)”！
Firefox(3.0)下，得出的最后一個數(shù)字是不特定的，有時候是0，有時候是一個負(fù)數(shù)，這問題后面再說。
（一）IE系列中的setTimeout
首先，我們看看微軟出的DHTML參考手冊中是如何說的：
setTimeout Method
Evaluates an expression after a specified number of milliseconds has elapsed.
Syntax
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
Parameters
vCode Required. Variant that specifies the function pointer or string that indicates
the code to be executed when the specified interval has elapsed.
iMilliSeconds Required. Integer that specifies the number of milliseconds.
sLanguage Optional. String that specifies one of the following values:
JScript Language is JScript.
VBScript Language is VBScript.
JavaScript Language is JavaScript.
MSDN上關(guān)于setTimeout的說明：
http://msdn.microsoft.com/en-us/library/ms536753(VS.85).aspx
也就是說，setTimeout接收3個參數(shù)，第3個參數(shù)表示腳本語言的類型，如果你再傳入更多的參數(shù)，是無意義的。
因此，在IE中，以下兩種都是對的。
setTimeout('alert(1)', 50);
setTimeout('msgbox "終止、重試、忽略，您看著辦吧。", vbAbortRetryIgnore + vbDefaultButton2, "告訴您"', 50, 'VBScript');
（二）Mozilla系列中的setTimeout
我們看看Mozilla官方網(wǎng)站上 Gecko DOM Reference 手冊中是如何說的：
window.setTimeout
Summary
Executes a code snippet or a function after specified delay.
Syntax
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);
前兩個參數(shù)都一樣，沒差別，從第三個參數(shù)就不同了。
因?yàn)槟壳爸挥蠭E瀏覽器支持多種語言的腳本，其它瀏覽器只支持js腳本所以不需要傳語言類型的參數(shù)。
Mozilla把傳給setTimeout的第3個以及更后面的更多參數(shù)依次的傳給前面的func做為參數(shù)。
Firefox, Opera, Safari, Chrome等等也都是如此。
但是注意到，Mozilla上說了他家的setTimeout有一個叫做"Lateness" argument的BUG.
"Lateness" argument
Functions invoked by setTimeout are passed an extra "lateness" argument in Mozilla,
i.e., the lateness of the timeout in milliseconds. (See bug 10637 and bug 394769.)
這就是開頭那個例子中，F(xiàn)irefox(3.0)下有一個烏龍數(shù)字的根源。
Mozilla上關(guān)于setTimeout的說明：
https://developer.mozilla.org/en/DOM/window.setTimeout
（三）其它瀏覽器系列(Opera, Safari, Chrome)中的setTimeout
和Mozilla系列中的基本一樣，但是沒有Mozilla系列中的多一個參數(shù)的BUG.

武林外傳：使用setTimeout的小技巧
(1)IE中給setTimeout中的調(diào)用函數(shù)傳參數(shù)
上面的分析可知，IE是不支持在setTimeout中給被調(diào)用的函數(shù)傳參數(shù)的，為了瀏覽器世界的和諧，我們可以把函數(shù)調(diào)用參數(shù)包裹進(jìn)新的匿名函數(shù)中。示例：

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

 
function f(a){ 
alert(a); 
} 
// setTimeout(f,50,'hello'); //用于非IE 
setTimeout(function(){f('hello')},50); //通用 
var str='hello'; 
setTimeout(function(){f(str)},50); //通用 

(2)this問題
setTimeout調(diào)用的函數(shù)被執(zhí)行時的上下文是全局，而不再是調(diào)用setTimeout方法時的上下文。所以，setTimeout的第一個參數(shù)的函數(shù)被執(zhí)行時其this是指向window的，如果需要保留調(diào)用setTimeout方法時的this，就需要把當(dāng)時的this傳進(jìn)去。示例：

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

 
function Person(name){ 
this.name=name; 
var f=function(){alert('My name is '+this.name)}; 
// setTimeout(f,50); //錯誤 
var THIS=this; 
setTimeout(function(){f.apply(THIS)},50); //正確，通用 
setTimeout(function(){f.call(THIS)},50); //正確，通用 
} 
new Person('Jack'); 

要說的就這些了。
發(fā)帖子不是腦力活，其實(shí)是體力活，組織文字，寫例子，排版，這些沒技術(shù)含量的事情是最累人最耗時間的。

您可能感興趣的文章: