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

寫在前面：

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

定時器的應用需求：

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

2.每隔一段時間重複執行某段函數————好比搶票軟件，好比設定500毫秒就重複刷新一次頁面等等。

倒計時跳轉實現demo：

裏面也有實時顯示時間的方法。

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。

clearInterval() ，這個函數只有一個做用，就是暫停setInterval()調用函數。

參數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()，不然會出現-一、-2的狀況，而後跳轉連接。具體的不懂的能夠看代碼註釋，寫的很詳細。

若是還不知道的話，能夠本身作個demo試試效果就知道了。

demo連接：

倒計時跳轉

菜鳥教程也有一個demo：

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

連接地址：js 定時器

---

寫在後面：

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

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

參考連接：

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