JavaScript setInterval()用法及代碼示例

JavaScript | setInterval() 方法

JavaScript 中的 setInterval() 是一個異步函數，它在每個指定的延遲(以毫秒為單位)後不斷調用回調。在本文中，我們將看看如何在 JavaScript 中使用 setInterval() 方法？我們已經看到了 setInterval() 的一個簡單用例，其中我們構建了一個簡單的 JavaScript 計時器。如果您還沒有，請在此處查看。

function callback() {
    console.log('This simple callback will be invoked after every 3sec');
}
let repeat = 3000;
setInterval(callback, repeat);

輸出

(2) This simple callback will be invoked after every 3sec

正如你所看到的，setInterval() 函數接受兩個參數或參數，一個回調函數，它在每個t毫秒和t毫秒本身作為第二個參數。這裏回調函數將在每 3 秒後調用一次。

我們再看一個例子，

var num = 0;
setInterval(function() {
    num++;
    console.log(num);
}, 1000);

輸出

1
2
3
4
5
6
...

你能看到上麵代碼中發生了什麽嗎？我們每秒鍾記錄一次從 1 到無窮大的數字。由於 setInterval() 函數無限期運行，因此我們沒有定義必須停止的位置的約束。

但是如果我們不得不在一定的時間間隔後停下來呢？有沒有辦法停止執行 setInterval() 函數？

setInterval() 函數在內部工作的方式是，每次調用這樣的函數時，它都有一個與之關聯的唯一 ID。在每次調用之後，這個唯一的 ID 就是函數返回的。因此，要停止執行 setInterval() 函數，我們所要做的就是捕獲或存儲該 ID 並在需要時將其清除。讓我們看看我們如何做到這一點，

var num = 0;
var ID = setInterval(function() {
    num++;
    console.log(num);
    if (num == 3) {
        console.log('Function stopped!');
        clearInterval(ID);
    }
}, 1000);

輸出

1
2
3
Function stopped!

讓我們了解上麵的代碼是如何工作的。我們知道異步函數不會等待其他代碼塊執行，我們的 setInterval() 函數是一個異步函數，它會在每一秒後運行。在它第一次運行之前，它的唯一 setInterval() ID 存儲在 ID 變量中。然後每 1 秒後，我們開始在控製台上記錄從 1 到 1 的數字，但是當我們達到 if 條件時，我們記錄一條簡單的消息並使用 clearInterval() 方法通過將其 ID 作為參數傳遞來銷毀 setInterval() 函數。

setInterval() 可能會很棘手，尤其是對於 JavaScript 麵試而言，因此請確保您玩得夠久以掌握它的竅門！