定時刷新之setTimeout（只一次）和setInterval（間隔相同時間）的使用

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);

}