這兩個(gè)方法都可以用來(lái)在固定的時(shí)間段后去執(zhí)行一段javascirpt代碼，不過(guò)兩者各有各的應(yīng)用場(chǎng)景。

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

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

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

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

　　一旦使用了這個(gè)函數(shù),那么就會(huì)每個(gè)5秒鐘顯示一次時(shí)間。如果使用setInterval，則相應(yīng)地代碼如下所示：

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

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

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

函數(shù)指針的使用

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

如果用函數(shù)指針作為setTimeout和setInterval函數(shù)的第二個(gè)參數(shù)，那么它們就可以去執(zhí)行一個(gè)在別處定義的函數(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);

 討 論

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

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

var intervalProcess = setInterval("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal()
{
    clearInterval(intervalProcess);
}

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

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

到此這篇關(guān)于JavaScript setTimeout與setTimeinterval使用案例詳解的文章就介紹到這了,更多相關(guān)js setTimeout與setTimeinterval使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論