setTimeout

• setTimeout：定時器，只執行一次，屬於非同步，因此就算設定 0 秒執行，還是會先執行原本的程式碼才去執行 setTimeout 內的 function 內容，參考下面的例子的顯示順序
• 語法：setTimeout(function,delay)
  • function：時間到後想要執行的函式內容
  • delay：單位為毫秒(1 秒 = 1000 毫秒)，若不寫預設為 0，直接執行

console.log(1); // 1

//非同步執行，不管幾秒，先執行 2 後才會是 3、4
setTimeout(() => console.log(3), 0) // 3
setTimeout(() => console.log(4), 3000) // 4
    
console.log(2); // 2

setInterval

• setInterval：定時器，會不斷重複執行，屬於非同步
• 語法：setInterval(function,delay)
  • function：想要重複執行的函式內容
  • delay：單位為毫秒(1 秒 = 1000 毫秒)，若值 < 10，則設定為 10

setInterval(( () => console.log("Hi") ), 1000);

function 參數

• 在第一個參數 function 的部分是可以直接打 code 的，但是需要是字串，會透過 eval 轉換，怕安全性問題還是會建議使用 function
• 若無變成字串，則那段 code 會直接執行，而無定時或重複的功能

setTimeout('console.log("1 秒後執行 console")', 1000);
setTimeout(console.log("直接執行 console"), 1000);

function a() {
  console.log("a");
}

function b() {
  console.log("b");
}

setTimeout('a()', 3000) // 3 秒後出現 a
setTimeout(b(), 5000) // 直接出現 b
setTimeout(b, 5000) // 5 秒後出現 b

取消

• clearTimeout(timeoutid)：將設定的 setTimeout() 回傳的 id 放入，在執行前 (delay) 即可取消
• clearInterval(intervalid)：將設定的 setInterval() 回傳的 id 放入

let timeoutid = setTimeout(( () => console.log("timeout") ), 5000);
let intervalid = setInterval(( () => console.log("Hi") ), 2000);

clearTimeout(timeoutid);
clearInterval(intervalid);

參考資料

MDN window.setTimeout
MDN window.setInterval
談談 JavaScript 的 setTimeout 與 setInterval
JavaScript setTimeout(), setInterval()
[javascript] 深入了解 setTimeout() 與 setInterval() 的不同之處
JS 原力覺醒 Day26 - 常用 API： setTimeout / setTimeInterval

次回

找靈感，思考中....