這兩個方法都可以用來在固定的時間段後去執行一段scirpt程式碼，不過兩者各有各的應用場景。

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

　　不過這兩個函式還是有區別的，setInterval在執行完一次程式碼之後，經過了那個固定的時間間隔，它還會自動重複執行程式碼，而setTimeout只執行一次那段程式碼。

　　雖然表面上看來setTimeout只能應用在on-off方式的動作上，不過可以通過建立一個函式迴圈重複呼叫setTimeout，以實現重複的操作：

showTime();
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString());
    setTimeout("showTime()",5000);
}

　　一旦使用了這個函式,那麼就會每個5秒鐘顯示一次時間。如果使用setInterval，則相應地程式碼如下所示：

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(functiwww.cppcns.comon(){var today = new Date();
alert("The time is: " + today.toString());},500);

 討 論

如果對計時函式不加以處理，那麼setInterval將會持續執行相同的程式碼，一直到瀏覽器視窗關閉，或者使用者轉到了另外一個頁面為止。不過還是有辦法可以終止setTimeout和setInterval函式的執行。

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

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身上實現，具體實現如下：

var timeoutProcess = setTimeout("alert('GOAL!')",3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stoXrrqQHKpGoalLink,false);
客棧function stopGoal() {
   clearTimeout(timeoutProcess);
}

到此這篇關於 setTimeout與setTimeinterval使用案例詳解的文章就介紹到這了,更多相關 setTimeout與setTimeinterval使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！