# [JS30]DAY2:JS and CSS Clock

:::info
:black_small_square:**目標：**
:::

:::info
:black_small_square:**步驟流程**：
:::
:::info
:black_small_square:**學習筆記：** :mega:
:::
## :after
## new Date()
## setInterval()
固定延遲了某段時間之後，才去執行對應的程式碼，然後「不斷循環」。 當然也會回傳一個獨立的 timer ID。
## setTimeout()
延遲了某段時間 (單位為毫秒) 之後，才去執行「一次」指定的程式碼，並且會回傳一個獨立的 timer ID。
## 取消setInterval()或setTimeout()
* ==**clearInterval()**== 來取消 setInterval()

* ==**clearTimeout()**== 來取消setTimeout()

但是setTimeout() 只會執行一次，所以 clearTimeout() 只會在 setTimeout() 指定的時間未到時才會有效果， 若 setTimeout() 的 callback function 已經被執行，那就等同是多餘的了。

:clipboard: 更多請參考：https://kuro.tw/posts/2019/02/23/%E8%AB%87%E8%AB%87-JavaScript-%E7%9A%84-setTimeout-%E8%88%87-setInterval/
## window.requestAnimationFrame(callback)
產生動畫可以使用這個，通常會根據 W3C 的建議符合多數瀏覽器重新整理的頻率。

## IIFE 立即函式（Immediately Invoked Functions Expressions）
定義完馬上就執行的 JavaScript function。
:::warning
特性：
1. Grouping Operator () 包起來的 anonymous function。這樣的寫法可以避免裡面的變數污染到 global scope。
2. 馬上執行 function 的 expression ()，JavaScript 引擎看到它就會立刻轉譯該 function。
:::

範例：
X

// 假設想透過迴圈 + setTimeout 來做到
// 每秒鐘將 i 的值 console 出來

for( var i = 0; i < 5; i++ ) {
  window.setTimeout(function() {
    console.log(i);
  }, 1000);
}

O

for( var i = 0; i < 5; i++ ) {
  // 為了凸顯差異，我們將傳入後的參數改名為 x
  // 當然由於 scope 的不同，要繼續在內部沿用 i 這個變數名也是可以的。
  (function(x){
    window.setTimeout(function() {
      console.log(x);
    }, 1000 * x);
  })(i);
}

or

for( let i = 0; i < 5; i++ ) {
  window.setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}