JavaScript setTimeout和setInterval的用法與區別詳解

2022-04-20 19:00:22

I. 總述

首先，setTimeout()和setInterval()函數是JavaScript中兩個很重要的關於"時間的函數"，因此，我們在學習JavaScript的過程中，一定要對這兩個函數有一個深入的學習，它們兩個函數也是經常被使用！

其中，如果分別用一句話來概括這兩個函數，那麼應該是這樣的：

setTimeout(): 該函數能夠按照設定的時間值延遲執行其中的事件。

setInterval(): 該函數能夠按照設定的時間值作為間隔，週期性的執行其中的時間。

當然了，只是簡述，細節方面，我們在下面的部分給大家做講解。

II. setTimeout()函數

首先是我們的setTimeout()函數，它的格式是怎麼樣的呢：

setTimeout(function,times);

是的，就是這麼簡單的格式，其中，我們需要兩個引數，分別是一個函數和一個int值，函數表示延遲一段時間後要執行的函數體，int值就是我們說的這段時間，例如我們看這段簡單的程式碼：

setTimeout(function(){
    alert("hello,setTimeout()");
}, 1000);

執行之後，它會在1s的延遲之後，彈出一個彈框，其中1000的單位是毫秒！

學到這裡，大家覺得很簡單，對嗎？好的，那我給一段程式碼，大家猜一下它會輸出什麼：

for (var i = 1; i <= 5; i++) {
    setTimeout(function () {
        alert(i)
    }, 1000)
}

哎，有人要說了，簡單啊，這不是輸出：1 2 3 4 5 嗎？

然而實際上是這樣的：【點我揭曉】

也就是，它輸出了5 5 5 5 5，所以這是為什麼呢？因為setTimeout()是一個非同步執行函數，說人話就是，它裡面的函數體，並不會在每一次執行的時候立刻執行，而是會丟進執行佇列中，等待"主線任務"全部完成，才會執行它。

於是在5次for迴圈後，i的值是5，傳進去，彈出了5個5。

那麼有沒有解法呢？我給大家兩種解法：

1️⃣ 使用關鍵字let：

for (let i = 1; i <= 5; i++) {
    setTimeout(function () {
        alert(i)
    }, 1000)
}

那為啥使用let就可以了呢：

其實使用let之後，也沒有改變執行機制，仍然是最後執行的alert()，但是let可以在每一次把更新的變數i傳進函數體內，也就是每一次的i加1之後，會把這個新值放進佇列中對應的函數內，於是就解出了這個問題。

2️⃣ 定義一個外部變數：

我們在外部定義一個變數，這樣這個變數每一次會被放入佇列中，依舊不改變本身的執行機制：

var j = 1;
for (i = 1; i <= 5; i++) {
    setTimeout(function () {
        alert(j)
        j++;
    }, 1000);
}

第二種做法，更容易被別人看懂，也更適合做專案時實際使用。

III. setInterval()函數

第二個函數setInterval()就沒那麼複雜了，但是它的功能確實很強大的，我們先看看它的使用格式：

setInterval(function,times);

依舊是兩個引數，同setTimeout()格式一致，它可以以設定的times為間隔來回圈重複function，我們用一個小例子來測試一下：

setInterval(function(){
    alert('hello,setInterval()');
}, 1000);

執行之後，每過1秒，就會彈出一個彈窗，顯示這段話。

那執行之後，我們想當然會有一個問題，那就是可以在某個特定的時機讓它不再回圈執行了嗎？答案是肯定滴，只不過我們需要定義一個setInterval()函數的物件，我們一般取名叫：timer：

var i = 5;
var timer = setInterval(function(){
    i --;
    if(i < 0){
    clearInterval(timer);
}
    alert('i');
    
}, 1000);

上面的程式碼中，我們給setInterval建立了一個物件叫timer，在外部我們定義了另一個變數i，之後我們每一次執行Interval內的函數時，就讓 i-1 ，減到0以下，清除定時器：

clearInterval(timer物件)；

上面這句話是清除定時器的程式碼，傳入一個setInterval()函數的物件即可。

IV. 新年倒計時案例

最後，我們用學習的setTimeout()函數和setInterval()函數聯動做一個新年倒計時案例吧：

我們想要這樣的效果：

首先，實現在螢幕上展示60秒倒計時；

在倒計時為0後，彈窗展示新年快樂！

有人看了這個說明，覺得那麼我們的程式碼應該是這樣的：

var element = document.getElementById("xin-nian")
var clock = 60;
var timer = null;
timer = setInterval(function () {
    element.innerHTML = "新年倒計時：" + clock + " !";
    console.log(clock)
    clock--;
    if (clock < 0) {
        clearInterval(timer);
        alert("新年快樂！");
    }
}, 1000);

乍一看，好像沒問題，但實際執行的時候，由於向html寫入內容有一個小延遲，會導致最後倒計時0這個數位沒被寫進去就會彈窗，因此我們要在倒計時最後一秒，用setTimeout()做一個小緩衝：

if (clock < 0) {
    clearInterval(timer);
    setTimeout(function () {
        alert("新年快樂！")
    }, 500)
}

於是完整的程式碼應該是這樣的：

<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年倒計時</title>
    <style>
        body {
            background-image: url(./1.jpg);
        }
    </style>
</head>
 
<body>
    <h1 id="xin-nian" style="text-align: center;margin-top: 250px;font-size: 50px;"></h1>
    <script>
        var element = document.getElementById("xin-nian")
        var clock = 60;
        var timer = null;
        timer = setInterval(function () {
            element.innerHTML = "新年倒計時：" + clock + " !";
            console.log(clock)
            clock--;
            if (clock < 0) {
                clearInterval(timer);
                setTimeout(function () {
                    alert("新年快樂！")
                }, 500)
            }
        }, 1000);
    </script>
 
</body>
 
</html>

實現的效果是下面這樣的動圖：

總結

到此這篇關於JavaScript setTimeout和setInterval的用法與區別的文章就介紹到這了,更多相關js setTimeout和setInterval的用法內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

JavaScript setTimeout和setInterval的用法與區別詳解

目錄

I. 總述

II. setTimeout()函數

III. setInterval()函數

IV. 新年倒計時案例

總結

熱門文章