# JS 筆記 - setTimeout、setInterval 的差別
###### tags: `js`

## setTimeout

- 定時器，**只執行一次**，屬於**非同步**
- 語法：

setTimeout(()=> function,delay)

- `function` | `string`：時間到後想要執行的函式內容
- `delay`：單位為毫秒(1 秒 = 1000 毫秒)，若不寫預設為 0，直接執行

console.log(1);

setTimeout(() => console.log(4), 3000)
// 在 3000 毫秒(3秒) 後執行

setTimeout(() => console.log(3), 0)
// 在 0秒 後執行 = 直接執行，但會排在原本的程式碼之後

console.log(2);
//非同步執行，不管幾秒，先執行 1 2 後才會是 3、4

// 1 > 2 > 3 > 4

- 可以透過 `clearTimeout`取消程式碼的執行。

let timeoutid = setTimeout(( () => console.log("timeout") ), 5000);

clearTimeout(timeoutid);

- **小貼士** **`function`** 部分可傳入字串

    // 傳入非 function
    setTimeout(**console.log("Hello!")**, 1000);
    
    // （馬上印出） Hello!
    
    // 實際上是 ＝
    setTimeout(**"undefined"**, 1000);
    // function 沒有回傳值，那就是 undefined
    // 會馬上印出 Hello! 是因為程式進行到 **console.log("Hello!")** 所以被直接執行

    // 使用字串的部分會在 1秒之後執行
    // (內部隱含 eval 的轉換，所以執行上效能會比非字串的版本差一些。)
    
    setTimeout(**'console.log("Hello!")'**, 1000);
    
    // （1秒之後） Hello!

## setInterval

- 定時器，會**不斷重複執行**，屬於**非同步**
- ex: 每秒更新的時鐘
- 語法：

setInterval(()=> function, delay)

- `function`：想要重複執行的函式內容

- `delay`：單位為毫秒(1 秒 = 1000 毫秒)，若值 < 10，則設定為 10

### 參考

[JavaScript Day22 - setTimeout、setInterval ](https://ithelp.ithome.com.tw/articles/10279012)
[JS 原力覺醒 Day26 - 常用 API： setTimeout / setTimeInterval ](https://ithelp.ithome.com.tw/articles/10227121)

更多之間的差別比較與應用：
[使用setInterval與setTimeout需要注意的部分](https://blog.yyisyou.tw/312fcf2f/)