如何使用 JavaScript `setInterval`【初学者指南】

一个用于重复执行任务的实用函数

🔁 什么是 setInterval？

setInterval() 是一个按指定间隔重复执行另一个函数的函数。

setInterval(函数, 毫秒间隔);

🕒 示例：每秒显示当前时间


<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>实时钟表</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 50px;
      background: #f9f9f9;
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    #clock {
      font-size: 2.5rem;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>

  <h1>🕒 当前时间</h1>
  <div id="clock">--:--:--</div>

  <!-- 脚本 -->
  <script>
    setInterval(() => {
      const now = new Date();
      const time = now.toLocaleTimeString();
      document.getElementById("clock").textContent = time;
    }, 1000);
  </script>

</body>
</html>

👇这将显示👇

--:--:--

🧩 setInterval 的進階技巧與注意事項

setInterval() 是非常實用的函數，但若使用不當，可能會導致效能下降或出現非預期的行為。以下將介紹實際應用範例與應注意的重點。

🎯 有效的使用場景

setInterval() 適用於更新畫面元素或重複執行動畫。例如：顯示即時的 數位時鐘、執行 倒數計時器、或定時顯示 提示訊息。

⚠ 避免無限迴圈

使用 setInterval() 時，必須搭配 clearInterval() 來停止執行。若忘記停止，可能在使用者離開頁面後仍繼續執行，造成不必要的資源浪費。

🧪 與 setTimeout 的差異

setTimeout() 僅執行一次，setInterval() 則會依指定間隔重複執行。選擇使用哪一個需依照實際需求而定。