setTimeout和setInterval的使用

noONE 發布于2019-08-26 10:35 / 2660人閱讀

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

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

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

這兩個方法都可以用來實現在一個固定時間段之后去執行JavaScript。不過兩者各有各的應用場景。

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

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

雖然表面上看來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。

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

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

setTimeout(showTime, 500);

function showTime()

{

    var today = new Date();

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

}

另外，匿名函數還可以聲明為內聯函數：

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

討論
如果對計時函數不加以處理，那么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);
}

復制代碼

GPU云服務器云服務器服務器的使用和維護 setInterval 機智云服務器的設計和使用公司云服務器的使用和部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106438.html

JS忍者秘籍中的定時器機制詳解

摘要：設置和清除定時器直接引用忍者秘籍中的圖片注意定時器的時間間隔設為，也會有幾毫秒的延遲。以上參考資料忍者秘籍第章馴服線程和定時器 showImg(https://segmentfault.com/img/remote/1460000015353524?w=1024&h=681); 前言前段時間剛看完《JS忍者秘籍》，雖說是15年出版的，有些東西是過時了，但像對原型鏈、閉包、正則、定時器...

keelii 2019-08-22 18:11 評論0 收藏0
定時器

摘要：提供定時執行代碼的功能，叫做定時器，主要由和這兩個函數來完成。它返回一個整數，表示定時器的編號，以后可以用來取消這個定時器。上面代碼中，回調函數不會再執行了，因為兩個定時器都被取消了。 JavaScript 提供定時執行代碼的功能，叫做定時器（timer），主要由setTimeout()和setInterval()這兩個函數來完成。它們向任務隊列添加定時任務。 setTimeout()...

Nino 2019-08-23 15:59 評論0 收藏0
js計數器方法setInterval()、clearInterval()、setTimeout()和

摘要：方法描述周期性地調用一個函數或者執行一段代碼。方法可取消由方法設置的。語法詳解是該延時操作的數字此隨后可以用來作為方法的參數。需要注意的是，不支持第一種語法中向延遲函數傳遞額外參數的功能。該值標識要取消的延遲執行代碼塊。方法描述 setInterval 周期性地調用一個函數(function)或者執行一段代碼。 clearInterval 取消掉用setI...

keithxiaoy 2019-08-21 10:24 評論0 收藏0
JavaScript 定時器

摘要：定時器方法相關方法有四種。返回值返回值是一個正整數，表示定時器的編號。這個值可以傳遞給來取消該定時器。使用方法很簡單只有一個參數，該參數為您要取消定時器的標識符。用法很簡單當代碼運行到這行的時候，會取消所設置的定時器。簡單介紹在JavaScript中定時器有兩個 setInterval() 與 setTime...

王偉廷 2021-11-22 15:29 評論0 收藏0
process.nextTick() 、setTimeout()、setInterval() 運行機

摘要：注意如果主邏輯的代碼執行時間已經超過了第二個參數設置的時間，那么等運行到該回調函數時，它會忽略掉這個時間，并立即執行。如果某一個進行大量的計算，那么它就會阻塞在當前的回調函數中，等待該計算完成后，再執行下一個的回調函數。 setTimeout() ? JavaScript是一個單線程的語言，也就是說它同一時間只能執行一段代碼，接下來我們通過兩個例子說明一下單線程語言和多線程語言的...

lscho 2019-08-23 15:59 評論0 收藏0