setInterval 和 setTimeout

setInterval 和 setTimeout 是 JavaScript 原生的方法，用於定時呼叫函式，它們類似但有一些差異。

• setTimeout : 是設定一個定時器，一段時間後執行一次函式
• setInterval : 是按照指定的時間間隔重複呼叫同一個函式。

舉個例子，如果你需要在頁面上每秒鐘更新當前時間：

使用 setInterval ：

setInterval(() => {
  const now = new Date();
  setCurrentTime(now.toLocaleTimeString());
}, 1000);

使用 setTimeout:

updateTime() {
  const now = new Date();
  setCurrentTime(now.toLocaleTimeString());
  setTimeout(this.updateTime, 1000);
}

updateTime(); // 开始第一次调用

setInterval 可能會更容易使用和管理，因為定期呼叫函式是內建的。

而使用 setTimeout 則可能需要更多的跟蹤和計算。

談談 JavaScript 的 setTimeout 與 setInterval

相信接觸過 JavaScript 的朋友對於要透過 JavaScript 來控制時間或是實作一個計時器，一定都會想到 setTimeout() / setInterval() 。 但你知道透過 setTimeout() 或 setInterval() 來計算時間，不僅每個人執行的結果不同，而且 誤差還可能相當大嗎？ 在正式進入主題前，先來簡單介紹一下 setTimeout() 與 setInterval() 。 根據 MDN 定義 setTimeout() 的作用 是在延遲了某段時間 (單位為毫秒) 之後，才去執行「一次」指定的程式碼，並且會回傳一個獨立的 timer ID： var timeoutID = scope. https://kuro.tw/posts/2019/02/23/%E8%AB%87%E8%AB%87-JavaScript-%E7%9A%84-setTimeout-%E8%88%87-setInterval/

for( var i = 0; i < 5; i++ ) {

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

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

// 0
// 1
// 2
// 3
// 4

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

// 5
// 5
// 5
// 5
// 5