在 JavaScript 中停止 setInterval 呼叫

呼叫 clearInterval(timerId)，即可停止 JavaScript 計時器之後的重複執行。請先儲存 setInterval() 傳回的值，再將同一個計時器識別值傳給 clearInterval()。停止按鈕可以在點擊事件處理器中呼叫它。

在 JavaScript 中使用 clearInterval() 停止 setInterval() 計時器

setInterval(callback, delay, ...args) 會排定回呼重複執行，並傳回計時器識別值。延遲時間以毫秒為單位；它決定回呼何時可以開始執行，但不保證回呼會在該確切時間開始，其他工作也可能影響排程。延遲時間之後的引數會傳給每次回呼。

以下 Node.js 範例會輸出三次更新，接著使用儲存在 timerId 中的識別值清除重複計時器：

let count = 0;
const timerId = setInterval(() => {
  count += 1;
  console.log("Hello");
  if (count === 3) {
    clearInterval(timerId);
  }
}, 1000);

Hello
Hello
Hello

提供的執行結果包含以下三行，標準錯誤輸出為空，結束代碼為 0。回呼每次執行時都會遞增 count。計數達到三次時，clearInterval(timerId) 會阻止計時器之後排定的執行。在應用程式中，只要使用者仍可能需要停止計時器，就應保留它的識別值；不要嘗試從回呼或延遲時間反推出識別值。

若要加入瀏覽器停止按鈕，請放入訊息元素和停止按鈕，例如 <p id="message"></p><button id="stop">Stop</button>。等這些元素可用後，以 document.querySelector("#message") 和 document.querySelector("#stop") 選取它們，再宣告 let timerId。使用 stopButton.addEventListener("click", () => clearInterval(timerId)) 註冊按鈕處理器，並透過 timerId = setInterval(() => { message.textContent = "Still running"; }, 1000) 設定計時器。事件處理器和計時器設定必須共用同一個 timerId 變數。由於使用者會在設定完成後才點擊按鈕，處理器便會使用傳回的識別值；點擊停止按鈕後，後續更新就會停止。如果頁面指令碼在元素解析完成前執行，請等 DOM 準備就緒後再選取元素。

清除計時器會阻止該計時器之後排定的回呼執行，但不會中斷已開始執行的回呼，也不會還原回呼已做出的變更。如果回呼啟動了非同步工作，清除計時器也不會取消該工作；請依照該操作本身的 API 處理取消。了解這項差異，有助於判斷停止按鈕為何要等目前的工作完成後才看得出效果。

每次呼叫 setInterval() 都會建立獨立的重複計時器，並傳回自己的識別值。如果頁面有多個彼此獨立的重複工作，請分別儲存識別值，並清除與使用者操作相對應的那一個。計時器識別值不是回呼函式本身。把回呼、延遲時間或無關的識別值傳給 clearInterval()，都無法停止你要停止的計時器。計時器清除後，再對同一個識別值呼叫 clearInterval() 不會有作用。

如果工作要持續重複，直到某個操作將它停止，就使用 setInterval()。如果工作只需執行固定次數，請追蹤執行次數，並在達到指定次數時清除計時器，如同範例所示。對於瀏覽器中的按鈕，也可以在處理器清除計時器後變更按鈕狀態或顯示確認訊息，讓使用者知道重複更新已停止。