調用方式:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
功能:
Evaluates an expression after a specified number of milliseconds has elapsed. 在 超過必定的時間間隔(iMilliSeconds,這個參數以毫秒爲單位,若是你輸入1000,則表示一秒)以後執行表達式vCode,這個vCode可 以是一段程序,亦能夠是一個函數指針,即函數名稱。
例如:
window.setTimeout("alert('Hello, world')", 1000);
或函數指針
function func1() {alert("Hello, world");}
window.setTimeout(func1, 1000);
注意,在第二種調用方法中,你是不能向函數傳遞參數的,
例如:
function func2(message) { alert( message ); }
像如下的調用方式:
window.setTimeout(func2("Hello world"), 1000);
將產生「參數無效」的錯誤, 由於該寫法是在調用func2方法,並不是向 setTimeout 傳遞一個函數指針 。
要避免這種錯誤,那麼就寫成第一種方式好了:window.setTimeout("func2('Hello world')", 1000);
這個 window.setTimeout 方法的返回值什麼呢? window.setTimeout 亦可解釋爲 「 延遲執行 」。
例如 window.setTimeout(func1, 5000); 表示,func1() 函數,並不在該語句執行時當即執行,
而是從該語句執行後算起,延後 5 秒執行。因此,window.setTimeout 方法的返回值本質上就是這個 「 延遲執行 」的進程的ID。(根《JavaScript高級程序設計》一書)。若是你在這 5 秒的等待過程當中,想取消
這個進程,那個這個ID就會起做用了。經過調用 window.clearTimeout(iTimeoutID) 方法,並向該方法中傳遞
你在 iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage]) 中得到的ID,便可取消延遲執行。
所以,若是你想要取消 延遲執行 ,所定義的變量 iTimerID 必須是一個全局變量(global variable )。
setInterval 介紹:
iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage]) 該方法與 window.setTimeout
方法最大的區別是:該方法執行屢次,即按必定的時間間隔不斷地執行。其餘方面,都是相同的。
要取消執行,能夠調用。window.clearInterval(iIntervalID) 方法。
提示:若是咱們在 window.setTimeout 調用的函數中,再調用一次 window.setTimeout 方法,那不是實現了
setInterval 的效果
setTimeout爲0的應用
javascript
相似起線程。前者沒用settimeout ,因此是主線程去作的響應,因此在onkeydown 就觸發事件執行。獲得的數據會有差別。
setTimeout與setInterval是window對象的兩個很是神奇方法,用於實現定時或延時調用一個函數或一段代碼。
(新手可能認爲setTimeout與setInterval是javascript函數,這是錯誤的。新手容易將javascript對象函數與DOM對象方法混淆。)
先來一段代碼,你們猜猜在各類瀏覽器下的結果會是怎麼樣的呢?
JScript codefunction f(){
var s =
'arguments.length:'+arguments.length+'; ';
for(var i=0,n=arguments.length;i< n;i++){
s +=
' ['+i+']:'+arguments+'; ';
}
alert(s);
}
setTimeout(f,500,"javascript","AAA")
我這裏要探討的,不是何時該用哪個,而是探討這兩個方法在各瀏覽器中的差別。
原先我一直沒以爲這兩個方法會有什麼烏龍,一個偶然的機會讓我得知了,如今整理一下寫出來和你們分享。
由於setTimeout與setInterval的參數和用法是同樣的,只是功能不一樣,因此,爲了省事,我下面只以setTimeout爲例進行說明以及舉例。
setTimeout被最常常用到的形式大概是以下2種樣子的:
JScript code
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中,如下兩種都是對的。
JScript code 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');css