iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
0

[程式碼&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);
}

上一篇
[JS30]DAY1 : Drum Kit
下一篇
[JS30]DAY3 : CSS Variables
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30

尚未有邦友留言

立即登入留言