2024-11-19 setInterval(callback, delay, ...args);

2024-11-18 如何知道 setInterval 被佔用的資源？

setInterval 是 JavaScript 中的內建函式，用於根據指定的時間間隔（以毫秒為單位）反覆執行某段程式碼。它的語法如下：

setInterval(callback, delay, ...args);

參數說明

1. callback

   • 必需
   • 是一個函式，指明要反覆執行的程式邏輯。
   • 這個函式可以直接寫匿名函式（例如 () => {}），也可以是已定義的函式名稱（例如 myFunction）。
   • 在每個間隔時間到達後，callback 會被執行。

2. delay

   • 必需
   • 是一個數字，指定每次執行 callback 的間隔時間（以毫秒為單位）。
   • 如果 delay 的值小於 4 毫秒，瀏覽器會將其強制設為 4 毫秒（標準行為）。

3. ...args

   • 可選
   • 如果指定了參數，它們會在每次執行 callback 時傳遞給 callback 函式。

---

例子 1：基本用法

let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(`計數：${count}`);
  if (count >= 5) {
    clearInterval(intervalId); // 停止計時器
    console.log("計時完成");
  }
}, 1000); // 每隔 1 秒執行一次

執行結果

• 每隔 1 秒，count 增加 1，並打印當前值。
• 當 count 達到 5 時，停止 setInterval。

---

例子 2：帶參數的 setInterval

function greet(name) {
  console.log(`Hello, ${name}!`);
}

setInterval(greet, 2000, "Alice"); // 每隔 2 秒執行一次，並傳遞 "Alice" 作為參數

執行結果

• 每 2 秒執行一次 greet，輸出：

  Hello, Alice!
  Hello, Alice!
  ...

---

你的範例分析

this.timer = setInterval(() => {
  this.time += 10; // 每 10 毫秒，time 增加 10
}, 10);

參數解釋

1. callback

   • () => { this.time += 10; } 是箭頭函式，表示每 10 毫秒要執行的邏輯：讓 this.time 的值增加 10。
   • 使用箭頭函式確保 this 指向 Vue 組件的實例（避免上下文問題）。

2. delay

   • 10 毫秒，表示 callback 函式每 10 毫秒執行一次。

---

清除計時器

setInterval 會一直執行，直到被明確停止。如果不停止，會一直佔用資源。

停止計時器需要使用 clearInterval 並傳入 setInterval 的返回值：

clearInterval(this.timer);

---

當不清除計時器會發生什麼？

• 計時器會一直執行，佔用內存和 CPU 資源。
• 多次啟動 setInterval 而不清除舊的計時器，會造成多個計時器同時執行，導致邏輯混亂。

範例問題：未清除舊計時器

setInterval(() => console.log("執行中"), 1000);
// 這段代碼會每秒打印 "執行中"，除非重啟頁面或清除計時器