相信大家對於這樣的圖片輪播（Carousel）效果一定不陌生，幾乎在各大網站的首頁都能看到。

像這樣 「每隔固定時間自動切換下一張照片」 或是 「定時重複執行特定任務」 的需求，在 JavaScript 中最標準的解法就是使用 setInterval()。

(上面示範的效果是套用 Bootstrap 5 的輪播元件 (Carousel)，而它的底層運作機制，其實也是透過 setInterval() 定時器來控制自動播放。)

筆記目錄

• 什麼是 setInterval()？
• 語法結構與參數說明
• 常見實作應用情境
• 如何停止定時器？clearInterval()
• 留意點

什麼是 setInterval()？

setInterval() 是瀏覽器 window 物件提供的原生 Web API。

它的運作方式就像是一個自動鬧鐘：一旦啟動，它就會按照設定的時間間隔（以毫秒為單位），無限次循環執行指定的任務，直到明確告訴它「停下來」為止。

語法結構與參數說明

const timerId = setInterval(func, delay[, arg1, arg2, ...]);

• func （必填）：每次時間到了要執行的函式（Function）。

• delay （必填）：執行的時間間隔，單位為毫秒（Milliseconds）（1000 毫秒 = 1 秒）。

• arg1, arg2...（選填）：可以傳遞給 func 的參數。

• 回傳值 timerId：會回傳一個獨立的計時器 ID（數字），用來在後續搭配 clearInterval() 停止計時。

常見實作應用情境

1. 計時器
2. 幻燈片/輪播圖（自動換頁）

如何停止定時器？clearInterval()

因為 setInterval() 會無限循環執行下去，如果沒有寫停止機制，它就會一直執行到瀏覽器關閉為止。

要停止它，必須呼叫 clearInterval(timerId) 並傳入當初啟動時拿到的 ID：

let count = 0;

// 1. 啟動計時器並把 ID 存進 catIntervalId 變數中
const catIntervalId = setInterval(() => {
  count++;
  console.log(`貓咪餵食倒數：${count}`);

  // 2. 當達到指定條件時停止
  if (count === 3) {
    console.log('時間到！開始餵貓！');
    
    // 3. 呼叫 clearInterval 清除定時器
    clearInterval(catIntervalId);
  }
}, 1000);

留意點

setInterval() 是處理循環時間任務的核心工具，使用時務必牢記三大原則：

1. 記得保存回傳的 timerId。

2. 在適當時機使用 clearInterval() 停止它。

3. 重複開啟前記得先清除舊定時器。