iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

從零開始的JS學習之路系列 第 22

[Day22] 計時器 setTimeout()

圖片出處:https://tw.crazypng.com/56.html

在上一篇讀 callback function 時看到範例用了這個 setTimeout() 方法,在回呼函式裡很常用到,所以要來好好了解一番。

The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires. -- MDN

全域的 setTimeout() 方法可以用來設定一個計時器,當計時器的時間到時,會執行一次 function 或者一段 code。

從 JavaScript 最早期開始,web 瀏覽器就有定義兩個函式:
setTimeout() 指定的時間過後調用一個函式。
setInterval() 間隔一段時間重複調用該函式。

他們未被標準化為核心語言,但在所有瀏覽器和 Node 中都能作用,也是 JS 標準程式庫公認的一部分。 --犀牛

setTimeout() 的第一個引數是函式,第二個引數是數字,意指要經過多少時間(千毫秒)才會調用該函式,但如果系統繁忙也許會更久,也就是說至少要在指定的時間過後才會執行。而如果第二個引數設 0,不代表會立刻調用,而是註冊為"盡快呼叫",並且也要視系統繁忙程度,可能會等個 10 毫秒也不一定。來看下面範例:

setTimeout(() => { console.log("Go!!"); }, 3000);
setTimeout(() => { console.log("set..."); }, 2000);
setTimeout(() => { console.log("Ready..."); }, 1000);

執行後不是按照執行先後順序出現,而是依照第二個引數設定的時間(千毫秒),最先執行的 "Go!!" 因設定為 3,000 毫秒,所以是在最後才出現。

setInterval() 用法跟 setTimeout() 相同,差別在於setInterval() 是重複調用。

參考資料

MDN-setTimeout()
JavaScript大全(犀牛)


上一篇
[Day21] 回呼函式 Callback Function
下一篇
[Day23] Array methods 陣列操作方法(1)
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言