今天我們要看一個非常常見的功能－－計時器
網頁中經常出現幾秒後才跳出提示框、每隔一段時間更新畫面（例如時鐘、廣告輪播）、倒數計時器或是停止某個持續運作的功能

在JS裡，最常見的計時器有兩個，那就是setTimeout與setInterval

1.setTimeout：延遲執行一次

setTimeout可以讓你延遲一段時間後再執行某個函式
語法：

setTimeout(function, delay);

function：要執行的函式
delay：延遲的時間（毫秒，1 秒 = 1000 毫秒）

範例：

setTimeout(() => {
  console.log("3 秒後才出現這段文字！");
}, 3000);

這樣在3秒之後，才會印出文字

2.setInterval：重複執行

setInterval與setTimeout很像，但他不是執行一次，而是每隔一段時間就執行一次

語法：

setInterval(function, interval);

function：要重複執行的函式
interval：間隔時間（毫秒）

範例：

setInterval(() => {
  console.log("每 2 秒印一次這段文字！");
}, 2000);

這段程式會無限重複，直到網頁關掉或被手動停止

3.清除計時器：clearTimeout與clearInterval

有時候我們需要停止計時器，例如倒數計時完成後不再繼續，或使用者按下按鈕時停止

停止setTimeout

const timer = setTimeout(() => {
  console.log("這段文字永遠不會出現");
}, 5000);
clearTimeout(timer); // 在 5 秒前就把它取消了

停止setInterval

let count = 0;
const interval = setInterval(() => {
  count++;
  console.log(`第 ${count} 次執行`);

  if (count === 5) {
    clearInterval(interval); // 停止重複
    console.log("計時器結束！");
  }
}, 1000);

這段程式會印出 5 次後停止。

小練習：倒數計時器

我們來寫一個簡單的倒數計時器，從 10 秒開始倒數

<h2 id="timer">10</h2>
<script>
  let timeLeft = 10;
  const timerElement = document.querySelector("#timer");

  const countdown = setInterval(() => {
    timeLeft--;
    timerElement.textContent = timeLeft;

    if (timeLeft <= 0) {
      clearInterval(countdown);
      timerElement.textContent = "時間到！";
    }
  }, 1000);
</script>

頁面會顯示從 10 倒數到 0，最後顯示「時間到！」

5.setTimeout與setInterval的比較

方法 | 功能 | 是否重複 | 如何停止
------------- | ------------- | -------------
setTimeout | 延遲一段時間後執行一次 | 否 | clearTimeout
setInterval | 每隔一段時間執行 | 是 | clearInterval

有時候用 setTimeout 配合遞迴，也可以模擬 setInterval，而且能避免誤差。

範例：

function repeatTask() {
  console.log("每秒執行一次");
  setTimeout(repeatTask, 1000);
}

repeatTask();

整理一下今天的內容：setTimeout延遲執行一次，setInterval則是每隔一段時間執行一次
clearTimeout/clearInterval用來停止計時器