JavaScript教程:設置時延

原文地址:http://www.howtocreate.co.uk/tutorials/javascript/timers

在JavaScript中,有兩種方式可以設置時延(time delay)。第一種方式很簡單,這種方法會先等待所設定的時長,然後再運行函數代碼。第二種也是一樣,只是它會重複運行函數代碼。

注意,許多瀏覽器的最小時延值在25到75毫秒之間,一些極速瀏覽器的最小時延可達3毫秒。如果設置的時延值小於瀏覽器的最小值,代碼運行的實際時延就是就是瀏覽器的最小時延值。即便設置時延值高於最小值時,其實際時延效果也絕非完美。多數瀏覽器實際運行的延時值要稍高於設定值,一般只有幾毫秒的誤差。一些瀏覽器會在間隔計時器中(interval timer)修正誤差。另外需要注意的,在同一頁面上設置過多的計時器導致瀏覽器速度變慢,甚至無響應。三或四個計時器通常是可接受的上限。

setTimeout

第一種辦法使用Window對象的setTimeout方法。這種方法設置特定毫秒值,然後運行指定代碼,代碼可以是對函數的直接引用,也可以是作爲源代碼的字符串。

window.setTimeout(referenceToFunction,timeInMilliseconds);window.setTimeout('runMoreCode()',timeInMilliseconds);

如有可能,你應該使用直接的函數引用,這樣就更有效。使用字符串的話就要求瀏覽器創建新的腳本環境,以便能夠運行腳本。

如果你創建計時器,計時器後面的代碼會照常運行。在延遲設定時間後(舊線程結束),計時器會啓動新線程,setTimeout指定的代碼代碼會在新線程中運行,而其他代碼仍運行在原先的線程中。跟其他複雜的語言相比,JavaScript不提供任何方式來控制線程休眠,喚醒,或是生成。JavaScript引擎會處理一切,新線程會在當前線程結束後執行。儘管在理論上,多線程腳本引擎可以在老線程運行的同時執行新線程,但JavaScript引擎是一個單線程的引用程序,只允許在一個線程結束後,開啓其他線程。這一規則同樣適用於事件(Event),它會在自己的線程中運行,並可隨時觸發。它會等待當前線程結束,然後纔會開啓新線程。

要給延時計時器傳遞參數,有兩個方式可選。使用字符串,不過需要確保你傳遞的參數可以用基本的數據類型表示。不要包含任何可以破壞字符串格式的字符(如引號)。如果可以,請避免使用這種方法。不過以防你需要使用這樣方法,下面提供了一個例子參考。

window.setTimeout('runMoreCode(''+someString+'','+someNumber+')',10);

直接使用函數要更方便些,因爲你可以將變量作爲額外的參數傳遞給setTimeout方法。除了更方便,這種辦法也接受任何類型的變量。這一要注意,這種辦法在IE中不行。對採用Mozilla Gecko引擎的瀏覽器要小心(如Firefox和Netscape 6+),因爲這些瀏覽器總是會傳輸一個額外的參數給函數——毫秒誤差值(number of miliseconds error),下面這個例子使用了內聯匿名函數,其等效於使用直接的函數引用。

window.setTimeout(function (a,b) { //do something with a and b },10,someString,someObject);

傳輸給函數的變量將是函數調用時變量所保存的值。比如你有一個名爲myVar的變量,其保存的數值爲5。如果你調用時延函數,將變量myVar傳遞給它,然並設置1秒的延時值。然後你立即將myVar保存的數值改爲7。那麼當時延函數運行時,他會運行所時延函數所引用的函數,並將數字5傳遞給所引用的函數,因爲在調用時延函數時,變量myVar保存的值爲數字5。

悲劇的是,IE瀏覽器不能直接給時延函數傳遞額外的參數,確保兼容性常見的辦法就是保證變量處在當前作用域中,以便時延函數直接引用。

setInterval

setInterval 方法在語法上與setTimeout()一樣。區別就是它會以同樣的時延間隔重複運行,直至取消。

window.setInterval(function (a,b) { //do something with a and b },10,someString,someObject);

清除timeout和interval計時器

你可以調用相應的clearTimeout和clearInterval方法來取消timeout和interval計時器,計時器中的代碼就不會運行。在這個例子中,interval 計時器被設置成每一秒就運行一次。而timeout計時器被設置成在3.5秒後取消interval計時器運行。

var myInterval = window.setInterval(function (a,b) { myNumber++; },1000); window.setTimeout(function (a,b) { clearInterval(myInterval); },3500);

獲取timeout對象跟獲取inteval對象的方法一樣,而且你一樣也可以使用clearTimeout取消timeout計時器。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章