setTimeout和setInterval的使用

noONE 發(fā)布于2019-08-26 10:35 / 2673人閱讀

摘要：不過兩者各有各的應(yīng)用場景。方法實際上，和的語法相同。這意味著如果函數(shù)的主體部分需要秒鐘執(zhí)行完，那么整個函數(shù)則要每秒鐘才執(zhí)行一次。不過還是有辦法可以終止和函數(shù)的執(zhí)行。

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

這個變量命名可以在實際代碼中采用

這兩個方法都可以用來實現(xiàn)在一個固定時間段之后去執(zhí)行JavaScript。不過兩者各有各的應(yīng)用場景。

方法
實際上，setTimeout和setInterval的語法相同。它們都有兩個參數(shù)，一個是將要執(zhí)行的代碼字符串，還有一個是以毫秒為單位的時間間隔，當(dāng)過了那個時間段之后就將執(zhí)行那段代碼。

不過這兩個函數(shù)還是有區(qū)別的，setInterval在執(zhí)行完一次代碼之后，經(jīng)過了那個固定的時間間隔，它還會自動重復(fù)執(zhí)行代碼，而setTimeout只執(zhí)行一次那段代碼。

雖然表面上看來setTimeout只能應(yīng)用在on-off方式的動作上，不過可以通過創(chuàng)建一個函數(shù)循環(huán)重復(fù)調(diào)用setTimeout，以實現(xiàn)重復(fù)的操作：

File: settimeout_setinterval.js

復(fù)制代碼

showTime();

function showTime()

{

    var today = new Date();

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

    setTimeout("showTime()", 5000);

}

復(fù)制代碼
一旦調(diào)用了這個函數(shù)，那么就會每隔5秒鐘就顯示一次時間。如果使用setInterval，則相應(yīng)的代碼如下所示：

File: settimeout_setinterval2.js

復(fù)制代碼

setInterval("showTime()", 5000);

function showTime()

{

    var today = new Date();

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

}

復(fù)制代碼

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

如果要求在每隔一個固定的時間間隔后就精確地執(zhí)行某動作，那么最好使用setInterval，而如果不想由于連續(xù)調(diào)用產(chǎn)生互相干擾的問題，尤其是每次函數(shù)的調(diào)用需要繁重的計算以及很長的處理時間，那么最好使用setTimeout。

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

如果用函數(shù)指針作為setTimeout和setInterval函數(shù)的第二個參數(shù)，那么它們就可以去執(zhí)行一個在別處定義的函數(shù)了：

setTimeout(showTime, 500);

function showTime()

{

    var today = new Date();

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

}

另外，匿名函數(shù)還可以聲明為內(nèi)聯(lián)函數(shù)：

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

討論
如果對計時函數(shù)不加以處理，那么setInterval將會持續(xù)執(zhí)行相同的代碼，一直到瀏覽器窗口關(guān)閉，或者用戶轉(zhuǎn)到了另外一個頁面為止。不過還是有辦法可以終止setTimeout和setInterval函數(shù)的執(zhí)行。

當(dāng)setInterval調(diào)用執(zhí)行完畢時，它將返回一個timer ID，將來便可以利用該值對計時器進行訪問，如果將該ID傳遞給clearInterval，便可以終止那段被調(diào)用的過程代碼的執(zhí)行了，具體實現(xiàn)如下：

File: settimeout_setinterval3.js (excerpt)

復(fù)制代碼

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

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

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

function stopGoal()

{

    clearInterval(intervalProcess);

}

復(fù)制代碼
只要點擊了stopGoalLink，不管是什么時候點擊，intervalProcess都會被取消掉，以后都不會再繼續(xù)反復(fù)執(zhí)行intervalProcess。如果在超時時間段內(nèi)就取消setTimeout，那么這種終止效果也可以在setTimeout身上實現(xiàn)，具體實現(xiàn)如下：

File: settimeout_setinterval4.js (excerpt)

復(fù)制代碼

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

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

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

function stopGoal()
{
   clearTimeout(timeoutProcess);
}

復(fù)制代碼