js 定時器用法詳解——setTimeout()、setInterval()、clearTimeout()、clearInterval()

OBKoro1發表於2017-05-20
JS定時器

寫在前面：

在js應用中，定時器的作用就是可以設定當到達一個時間來執行一個函式，或者每隔幾秒重複執行某段函式。這裡面涉及到了三個函式方法：setInterval()、setTimeout()、clearInterval()，本文將圍繞這三種函式的用法，來實現定時器的功能，需要的朋友可以過來參考下，喜歡的可以點波贊，或者關注一下本人，希望對大家有所幫助。

定時器的應用需求：

1.設定一個時間，當時間到達的時候執行函式————比如：倒數計時跳轉頁面等等。

2.每隔一段時間重複執行某段函式————比如搶票軟體，比如設定500毫秒就重複重新整理一次頁面等等。

倒數計時跳轉實現demo：

js 定時器用法詳解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
裡面也有實時顯示時間的方法。

js定時器：

菜鳥教程中是這麼說的——js 定時器有以下兩個方法：

setTimeout() ：在指定的毫秒數後呼叫函式或計算表示式。

setInterval() ：按照指定的週期（以毫秒計）來呼叫函式或計算表示式。方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。

使用語法：

setTimeout（）：setTimeout(code,millisec)

setInterval（）：setInterval(code,millisec[,"lang"])

引數：code————要進行呼叫的函式或者要執行的程式碼串。millisec————時間（預設毫秒來計算），lang————可選。 JScript | VBScript | JavaScript（）

以上來自W3C：setTimeout() ,setInterval()

然而setTimeout()、setInterval()的區別在於

setTimeout()：當方法執行完成定時器就立即停止(但是定時器還在,只不過沒用了);

setInterval()：當方法執行完成,定時器並沒有停止,以後每隔[interval]這麼長的時間都會重新的執行對應的方法[function],直到我們手動清除定時器為止;

意思就是：

setTimeout()時間到了只會執行一次，setInterval()不會停止，會不間斷的執行對應的函式，直到我們手動暫停或視窗被關閉。

文章下面有demo講解：

那麼如何暫停setTimeout()、setInterval():

clearTimeout（）取消由setTimeout() 方法設定的 timeout。

js 定時器用法詳解——setTimeout()、setInterval()、clearTimeout()、clearInterval()

clearInterval() ，這個函式只有一個作用，就是暫停setInterval()呼叫函式。

js 定時器用法詳解——setTimeout()、setInterval()、clearTimeout()、clearInterval()

引數id_of_settimeout的意思是：

clearTimeout是：使用clearTimeout()的函式名字，或者clearTimeout()呼叫的函式的名字。

setInterval是：使用setInterval()的函式名字，或者setInterval()呼叫的函式的名字。

提示：setTimeout、setInterval在設定定時器的時候有區別，然而他們在清除定時器的時候沒有區別。

W3C資料:clearTimeout()，clearInterval()

倒數計時跳轉demo講解：

//html相關部分：
    <div class="time">請等待<span id="dd">5</span>秒</div>
    //這裡的5是初始5秒跳轉。
//js部分：
function run(){
            var s = document.getElementById("dd");//獲取dd的dom
            if(s.innerHTML == 0){// 當dd==0的時候，跳轉連結並且暫停函式
                window.location.href = "https://juejin.im/user/58714f0eb123db4a2eb95372/article";
                clearInterval(run());//取消由 setInterval() 設定的 timeout，，這裡數字暫停在0這裡，否則時間會繼續往下減會出現負數。
                //setInterval呼叫了run()，所以setInterval的返回ID值是run（）
            }
            s.innerHTML = s.innerHTML -1;//從5秒開始，隔一秒跑一次run()然後減1
        }
        window.setInterval("run();", 1000); //這段程式碼的效果是一秒呼叫一次run()， 
        //“run()”是要執行的程式碼塊，1000是時間，預設單位是毫秒複製程式碼

上面這段程式碼主要是一個倒數計時的效果，setInterval每隔一秒呼叫一次程式碼塊run()，當時間被減到0的時候，暫停繼續呼叫run()，否則會出現-1、-2的情況，然後跳轉連結。具體的不懂的可以看程式碼註釋，寫的很詳細。

如果還不知道的話，可以自己做個demo試試效果就知道了。

demo連結：

倒數計時跳轉

菜鳥教程也有一個demo：

js 定時器用法詳解——setTimeout()、setInterval()、clearTimeout()、clearInterval()

這也是一篇文章，寫的聽不錯的，推薦一波！

連結地址：js 定時器

寫在後面：

就十天沒寫文了，寫的時候就感覺有點不知道怎麼入手了，糾結了半天。我覺得應該把定時器的用法介紹清楚了，如果有什麼地方寫的不好的，歡迎指正，會在文章內勘誤的。

最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！因為我經常看不懂別人寫的分享，所以個人寫文比較偏小白，寫的不好之處，歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。
ps：目前待業，座標北京，本人適應網際網路快節奏，高強度，持續學習，持續成長，認真，嚴謹，學習積極性強。中小公司大佬求帶走，郵箱：obkoro1@foxmail.com。
掘金個人主頁

參考連結：

js 定時器
關於js中兩種定時器的設定及清除
w3c：setTimeout(),
w3c：setInterval()，
w3c：clearTimeout()，
w3c：clearInterval()。

相關文章