|
|
先來一段代碼，大家猜猜在各種瀏覽器下的結果會是怎么樣的呢？
復制代碼 代碼如下:
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")
我這里要探討的，不是什么時候該用哪一個，而是探討這兩個方法在各瀏覽器中的差異。
原先我一直沒覺得這兩個方法會有什么烏龍，一個偶然的機會讓我得知了，現在整理一下寫出來和大家分享。
因為setTimeout與setInterval的參數和用法是一樣的，只是功能不同，所以，為了省事，我下面只以setTimeout為例進行說明以及舉例。
setTimeout被最經常用到的形式大概是如下2種樣子的：
復制代碼 代碼如下:
iTimerID = setTimeout(strJsCode, 50) //strJsCode為一個包含js代碼的字符串
iTimerID = setTimeout(objFunction, 50) //objFunction為一個函數對象
第一種調用方式是傳包含js代碼的字符串，這種方式的好處是簡潔，但壞處是運行效率差，而且不利于語法解析，有潛在風險，更重要的是，處理比較復雜的內容比較費勁，這一點和eval的弊端是一致的。
所以，我們認為，通常應當采用第二種方式調用為好。（后面我的例子均采用第2種調用方式）
現在來揭曉開頭那一段代碼在各種瀏覽器下的結果：
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;
竟然有這么大的差別，還真是“你唱你的曲，我哼我的調”！
Firefox(3.0)下，得出的最后一個數字是不特定的，有時候是0，有時候是一個負數，這問題后面再說。
（一）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上關于setTimeout的說明：
http://msdn.microsoft.com/en-us/library/ms536753(VS.85).ASPx
也就是說，setTimeout接收3個參數，第3個參數表示腳本語言的類型，如果你再傳入更多的參數，是無意義的。
因此，在IE中，以下兩種都是對的。
setTimeout('alert(1)', 50);
setTimeout('msgbox "終止、重試、忽略，您看著辦吧。", vbAbortRetryIgnore + vbDefaultButton2, "告訴您"', 50, 'VBScript');
（二）Mozilla系列中的setTimeout
我們看看Mozilla官方網站上 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);
前兩個參數都一樣，沒差別，從第三個參數就不同了。
因為目前只有IE瀏覽器支持多種語言的腳本，其它瀏覽器只支持js腳本所以不需要傳語言類型的參數。
Mozilla把傳給setTimeout的第3個以及更后面的更多參數依次的傳給前面的func做為參數。
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.)
這就是開頭那個例子中，Firefox(3.0)下有一個烏龍數字的根源。
Mozilla上關于setTimeout的說明：
https://developer.mozilla.org/en/DOM/window.setTimeout
（三）其它瀏覽器系列(Opera, Safari, Chrome)中的setTimeout
和Mozilla系列中的基本一樣，但是沒有Mozilla系列中的多一個參數的BUG.
武林外傳：使用setTimeout的小技巧
(1)IE中給setTimeout中的調用函數傳參數
上面的分析可知，IE是不支持在setTimeout中給被調用的函數傳參數的，為了瀏覽器世界的和諧，我們可以把函數調用參數包裹進新的匿名函數中。示例：
復制代碼 代碼如下:
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調用的函數被執行時的上下文是全局，而不再是調用setTimeout方法時的上下文。所以，setTimeout的第一個參數的函數被執行時其this是指向window的，如果需要保留調用setTimeout方法時的this，就需要把當時的this傳進去。示例：
復制代碼 代碼如下:
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');
要說的就這些了。
發帖子不是腦力活，其實是體力活，組織文字，寫例子，排版，這些沒技術含量的事情是最累人最耗時間的。
JavaScript技術：setTimeout與setInterval在不同瀏覽器下的差異，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
