setTimeout和setInterval的使用
這兩個方法都可以用來實現在一個固定時間段之后去執行JavaScript。不過兩者各有各的應用場景。
方 法
實際上,setTimeout和setInterval的語法相同。它們都有兩個參數,一個是將要執行的代碼字符串,還有一個是以毫秒為單位的時間間隔,當過了那個時間段之后就將執行那段代碼。
不過這兩個函數還是有區別的,setInterval在執行完一次代碼之后,經過了那個固定的時間間隔,它還會自動重復執行代碼,而setTimeout只執行一次那段代碼。
setTimeout(表達式,延時時間)在執行時,是在載入后延遲指定時間后,去執行一次表達式,
僅僅執行是一次;
setInterval(表達式,交互時間)則不一樣,它從載入后,每隔指定的時間就執行一次表達式;
所以,兩者完全是不一樣的
很多人習慣於將setTimeout包含於被執行函數中,然后在函數外再次使用setTimeout來達到定時執行的目的
這樣,函數外的setTimeout在執行函數時再次觸發setTimeout從而形成周而復始的定時效。使用的時候各有各的優勢,
使用setInterval,需要手動的停止tick觸發。而使用方法中嵌套setTimeout,可以根據方法內部本身的邏輯不再調用
setTimeout就等於停止了觸發。
其實兩個東西完全可以相互模擬,具體使用那個,看當時的需要而定了。
就像for可以模擬所有的循環包括分支,而還提供了do、while一樣。
//每60秒執行myFunction()一次
setInterval("myFunction()",60000);
funcition myFunction(){ alert(’myFunction()’); } //每60秒執行一次myFunction()
setTimeout("myFunction()",60000); //需要函數觸發 //如 放置在 body 的 onload事件里面
雖然表面上看來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。 討 論
如果對計時函數不加以處理,那么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);
}