setTimeout和setInterval的使用 – JAVA編程語言程序開發技術文章

這兩個方法都可以用來實現在一個固定時間段之後去執行JavaScript。不過兩者各有各的應用場景。

 方 法
實際上,setTimeout和setInterval的語法相同。它們都有兩個參數,一個是將要執行的代碼字符串,還有一個是以毫秒為單位的時間間隔,當過瞭那個時間段之後就將執行那段代碼。

不過這兩個函數還是有區別的,setInterval在執行完一次代碼之後,經過瞭那個固定的時間間隔,它還會自動重復執行代碼,而setTimeout隻執行一次那段代碼。

雖然表面上看來setTimeout隻能應用在on-off方式的動作上,不過可以通過創建一個函數循環重復調用setTimeout,以實現重復的操作:

File: settimeout_setinterval.js

 

showTime();

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString());

    setTimeout("showTime()", 5000);

}

一旦調用瞭這個函數,那麼就會每隔5秒鐘就顯示一次時間。如果使用setInterval,則相應的代碼如下所示:

File: settimeout_setinterval2.js

 

setInterval("showTime()", 5000);

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString());

}

這兩種方法可能看起來非常像,而且顯示的結果也會很相似,不過兩者的最大區別就是,setTimeout方法不會每隔5秒鐘就執行一次showTime函數,它是在每次調用setTimeout後過5秒鐘再去執行showTime函數。這意味著如果showTime函數的主體部分需要2秒鐘執行完,那麼整個函數則要每7秒鐘才執行一次。而setInterval卻沒有被自己所調用的函數所束縛,它隻是簡單地每隔一定時間就重復執行一次那個函數。

如果要求在每隔一個固定的時間間隔後就精確地執行某動作,那麼最好使用setInterval,而如果不想由於連續調用產生互相幹擾的問題,尤其是每次函數的調用需要繁重的計算以及很長的處理時間,那麼最好使用setTimeout。

 函數指針的使用
兩個計時函數中的第一個參數是一段代碼的字符串,其實該參數也可以是一個函數指針,不過Mac下的IE 5對此不支持。

如果用函數指針作為setTimeout和setInterval函數的第二個參數,那麼它們就可以去執行一個在別處定義的函數瞭:

setTimeout(showTime, 500);

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString());

}

另外,匿名函數還可以聲明為內聯函數:

setTimeout(function(){var today = new Date();

     alert("The time is: " + today.toString());}, 500);
 

 討 論
如果對計時函數不加以處理,那麼setInterval將會持續執行相同的代碼,一直到瀏覽器窗口關閉,或者用戶轉到瞭另外一個頁面為止。不過還是有辦法可以終止setTimeout和setInterval函數的執行。

當setInterval調用執行完畢時,它將返回一個timer ID,將來便可以利用該值對計時器進行訪問,如果將該ID傳遞給clearInterval,便可以終止那段被調用的過程代碼的執行瞭,具體實現如下:

File: settimeout_setinterval3.js (excerpt)

var intervalProcess = setInterval("alert('GOAL!')", 3000);

var stopGoalLink = document.getElementById("stopGoalLink");

attachEventListener(stopGoalLink, "click", stopGoal, false);

function stopGoal()

{

    clearInterval(intervalProcess);

}
隻要點擊瞭stopGoalLink,不管是什麼時候點擊,intervalProcess都會被取消掉,以後都不會再繼續反復執行intervalProcess。如果在超時時間段內就取消setTimeout,那麼這種終止效果也可以在setTimeout身上實現,具體實現如下:

File: settimeout_setinterval4.js (excerpt)

 

var timeoutProcess = setTimeout("alert('GOAL!')", 3000);

var stopGoalLink = document.getElementById("stopGoalLink");

attachEventListener(stopGoalLink, "click", stopGoal, false);

function stopGoal()
{
   clearTimeout(timeoutProcess);
}

 摘自 Java編程語言學習專欄
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。