快捷導(dǎo)航

setTimeout和setInterval的瀏覽器兼容性分析

更新時(shí)間：2007年02月27日 00:00:00 作者：

無(wú)意中測(cè)試AJAXRequest瀏覽器兼容性的時(shí)候，發(fā)現(xiàn)AJAXRequest.update方法在某些情況下在IE里有問(wèn)題，經(jīng)過(guò)測(cè)試找到是setTimeout和setInterval的問(wèn)題。
問(wèn)題出現(xiàn)在當(dāng)調(diào)用AJAXRequest.update方法時(shí)，如果帶了更新間隔及更新次數(shù)，那么在IE下面就會(huì)出現(xiàn)問(wèn)題，具體表現(xiàn)為帶了更新間隔時(shí)是函數(shù)工作，帶上更新次數(shù)時(shí)函數(shù)無(wú)法在更新指定次數(shù)后停止執(zhí)行。
測(cè)試幾個(gè)例子之后找到了問(wèn)題所在，在IE里，setTimeout和setInterval是不支持參數(shù)傳遞的。
演示地址：http://www.xujiwei.cn/demo/usetimer/
在Netscape的JavaScript參考中找到setTimeout的語(yǔ)法如下：

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

setTimeout 
Evaluates an expression or calls a function once after a specified number of milliseconds elapses. 
語(yǔ)法 
setTimeout(expression, msec) 
setTimeout(function, msec, arg1, ..., argN) 
參數(shù) 
expression  A string containing a JavaScript expression. 
msec  A numeric value or numeric string, in millisecond units.   
function  Any function.   
arg1, ..., argN  (Optional) The arguments, if any, passed to function.  

第二種使用方法就是定義了一個(gè)定時(shí)器，在執(zhí)行時(shí)function時(shí)，將把調(diào)用setTimeout時(shí)定義的參數(shù)傳遞給function，但在IE中，并不支持這種方式的調(diào)用，也就是在執(zhí)行function的時(shí)候，函數(shù)并沒(méi)有接收到這些參數(shù)。如下面的例子：

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

<script type="text/javascript"> 
function show(str) { 
    alert("my site: "+str); 
} 
setTimeout(show,100,"www.xujiwei.cn"); 
</script>

在Firefox和Opera里，瀏覽器都能正確的彈出提示框顯示字符串“my site: www.xujiwei.cn”，而在IE里，顯示的則是“my site: undefined”，說(shuō)明函數(shù)show并沒(méi)有接收到參數(shù)str，所以顯示出來(lái)就是一個(gè)未定義變量。
當(dāng)然，如果在函數(shù)內(nèi)部使用的變量是全局變量時(shí)，就不必要考慮這些問(wèn)題，如：

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

<script type="text/javascript"> 
function show() { 
    // url是全局變量，函數(shù)正確執(zhí)行 
    alert("my site: "+url); 
} 
var url="www.xujiwei.cn"; 
setTimeout(show,100); 
</script> 

這段代碼在IE和Firefox里都能正常工作，顯示出“my site: www.xujiwei.cn”。
在變量是全局變量的情況下，可以使用語(yǔ)句段的方式來(lái)調(diào)用setTimeout，即使用第一種語(yǔ)法：

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

<script type="text/javascript"> 
function show(str) { 
    // url是全局變量，函數(shù)正確執(zhí)行 
    alert("my site: "+str); 
} 
var url="www.xujiwei.cn"; 
setTimeout("show(url);",100); 
</script> 

因?yàn)樽兞縰rl是全局變量，因此定時(shí)器執(zhí)行所定義的語(yǔ)句段“show(url);”能正確傳遞參數(shù)，但是如果url不是全局變量，而是一個(gè)局部變量時(shí)，執(zhí)行結(jié)果就會(huì)出錯(cuò)了：

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

<script type="text/javascript"> 
function show(str) { 
    // url是全局變量，函數(shù)正確執(zhí)行 
    alert("my site: "+str); 
} 
function test() { 
    var url="www.xujiwei.cn"; 
    setTimeout("show(url);",100); 
} 
test(); 
</script> 

此時(shí)就會(huì)出錯(cuò)了，在函數(shù)test執(zhí)行時(shí)，會(huì)提示url未定義，在執(zhí)行定義的語(yǔ)句段“show(url);”時(shí)，上下文已經(jīng)脫離了函數(shù)test，而url是在函數(shù)test內(nèi)部定義的，所以在執(zhí)行函數(shù)test的時(shí)候，變量url已經(jīng)釋放了。
如果要在setTimeout里面使用局部變量，并且解決在IE里的setTimeout不支持參數(shù)傳遞的問(wèn)題，可以使用匿名函數(shù)，即在調(diào)用setTimeout時(shí)定義一個(gè)匿名函數(shù)，在這個(gè)函數(shù)內(nèi)部進(jìn)行原來(lái)需要進(jìn)行的操作。

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

<script type="text/javascript"> 
function show(str) { 
    // url是全局變量，函數(shù)正確執(zhí)行 
    alert("my site: "+str); 
} 
function test() { 
    var url="www.xujiwei.cn"; 
    setTimeout(function(){show(url);},100); 
} 
test(); 
</script>

在上面的例子中，調(diào)用setTimeout時(shí)定義了一個(gè)匿名函數(shù)，它的函數(shù)體是“show(url);”，因?yàn)橐呀?jīng)定義了函數(shù)，所以在定時(shí)器調(diào)用這個(gè)函數(shù)時(shí)，變量url還是有引用的，因些函數(shù)可以正確執(zhí)行，顯示出字符串“my site: www.xujiwei.cn”。
總的來(lái)說(shuō)，使用setTimeout或者setInterval時(shí)需要注意以下幾點(diǎn)：
1. 定義定時(shí)器時(shí)如果是使用的表達(dá)示，那么其中的變量應(yīng)該是全局變量，或者是一個(gè)直接的值，而不能是局部變量。
2. 定義定時(shí)器時(shí)如果是定義的調(diào)用函數(shù)，那么應(yīng)該只寫(xiě)函數(shù)名，而不能加括號(hào)，如果加了就是定義返回值了。
3. 在IE里使用定時(shí)器時(shí)不能傳遞參數(shù)。
4. 如果要在IE里使用定時(shí)器時(shí)傳遞參數(shù)，可以使用匿名函數(shù)，在函數(shù)體中調(diào)用原來(lái)該調(diào)用的函數(shù)。

如有錯(cuò)誤還請(qǐng)指正。

您可能感興趣的文章: