【JavaScript】setTimeout 與 setInterval的用法

setTimeout

setTimeout() 的作用 是在延遲了某段時間 (單位為毫秒) 之後，才去執行「一次」指定的程式碼，並且會回傳一個獨立的 timer ID，使用格式有下列幾種：

var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);

var timeoutID = scope.setTimeout(function[, delay]);

var timeoutID = scope.setTimeout(code[, delay]);

例如：

var timeoutID = window.setTimeout(( () => console.log("Hello!") ), 1000);

setTimeout() 的第一個參數是可以指定「字串」的。

例如：

window.setTimeout('console.log("Hello!")', 1000);

但要是不小心打成這樣：

window.setTimeout(console.log("Hello!"), 1000);

setTimeout() 會先判斷第一個參數是否為 「function」，如果不是，則會嘗試將它當作字串處理。 換句話說，會將 console.log("Hello!") 執行後的回傳值轉為字串，......欸，沒有回傳值，那就是 undefined， 於是

window.setTimeout(console.log("Hello!"), 1000);

實際上是

window.setTimeout("undefined", 1000);

於是 1000ms 到了就什麼事都沒發生，而 "Hello" 則是在呼叫 console.log() 的當下就會被印出。

setInterval

setInterval() 則是固定延遲了某段時間之後，才去執行對應的程式碼，然後「不斷循環」。 當然也會回傳一個獨立的 timer ID，使用格式有下列幾種：

var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);

var intervalID = scope.setInterval(code, delay);

例如：

var timeoutID = window.setInterval(( () => console.log("Hello!") ), 1000);

取消 setInterval 和 setTimeout

setInterval() 一啟動之後就會在固定的間隔時間不斷執行，那麼如果想要停下來，要用 clearInterval() 來取消 setInterval()。

當呼叫 setTimeout() 與 setInterval() 的時候，它們會回傳一個獨立的 timer ID， 這個 ID 就是取消setTimeout() 與 setInterval() 的時候作為識別的數字：

例如：

var timeoutID = window.setInterval(( () => console.log("Hello!") ), 1000);

window.clearInterval(timeoutID);

&

var timeoutID = window.setTimeout(( () => console.log("Hello!") ), 1000);

window.clearTimeout(timeoutID);

• 兩者的不同之處是 setTimeout() 只會執行一次就結束，而 setInterval() 則是會在間隔固定的時間不斷重複。
• 瀏覽器的 setTimeout / setInterval 回傳的是 Number，而 Node.js 回傳的是 Object。

Ref

談談 JavaScript 的 setTimeout 與 setInterval