[程式碼&DEMO] [HackMD完整筆記]

目標

用JS與CSS製作出一個時鐘。

步驟流程

學習筆記

:after

new Date()

setInterval()

─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─
固定延遲了某段時間之後，才去執行對應的程式碼，然後「不斷循環」。 當然也會回傳一個獨立的 timer ID。

setTimeout()

─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─
延遲了某段時間 (單位為毫秒) 之後，才去執行「一次」指定的程式碼，並且會回傳一個獨立的 timer ID。

取消setInterval()或setTimeout()

─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─
clearInterval() :來取消 setInterval()

clearTimeout() :來取消setTimeout()

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

更多請參考：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。

特性：

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);
}