CHAPTER 18 · PRACTICE WORKSPACE

Timer、狀態與重複啟動排錯

可開始、暫停、重設且不會重複加速的倒數計時器

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

啟動單一 interval 並倒數到零

修改檔案：script.js

完成後看見：每秒扣一且連按不加速，零時自動停止

TASK-02稍後處理

完成可再次開始的暫停

修改檔案：script.js

完成後看見：暫停保留秒數，之後可繼續

TASK-03稍後處理

重設資料、timer 與畫面

修改檔案：script.js

完成後看見：任何狀態下都回到 10 秒與尚未開始

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：啟動單一 interval 並倒數到零

修改：script.js

完成後：每秒扣一且連按不加速，零時自動停止

講解時展開：2 個小型比較

setInterval vs timer id｜重複執行要可管理

比較：interval 產生的 id 是後續停止計時的憑證，不能每次開始都遺失或新增。

現在做：在 checkpoint-1/script.js 暫時註解 if (timerId !== null || remainingSeconds === 0) return;，重新整理後連點開始兩次，等待約 1.1 秒觀察數字可能扣兩格；恢復這行後再重跑同一操作。

看預期與證據

預期：未加 guard 時可看見重複 interval 造成一次跳多格；恢復 guard 後每秒只扣一，並能說出 timerId 是停止與防重複啟動的憑證。

證據：保留前後數字或錄下 Console：移除 guard 時約一秒扣兩格，恢復後連按仍只扣一；口述 timerId !== null 為何會阻擋第二個 interval。

秒數 state vs 畫面文字｜來源要一致

比較：倒數的真實狀態應先更新，再把同一個值渲染到畫面。

現在做：在 checkpoint-1/script.js 的 interval callback 暫時註解 remainingSeconds -= 1;，重新整理後按開始，觀察狀態文字變成「倒數中」但數字仍停在 10；恢復這行後再重跑。

看預期與證據

預期：能看見只改畫面狀態並不會讓秒數前進；恢復 remainingSeconds -= 1 並保留 renderTimer() 後，資料與畫面每秒同步。

證據：截圖或口述兩次結果：缺少資料更新時數字停在 10，恢復後每秒扣一；指出 remainingSeconds 是來源、renderTimer() 是呈現。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 確認 remainingSeconds 為 10、timerId 為 null，按開始後數字仍不變；暫停與重設留到後續任務。
  2. B｜預測：按開始後至少等待三秒，再快速連按開始，確認仍然每秒只扣一。
  3. C｜實作：在 script.js 的 `startButton` 的 click handler（TASK-01 區塊） 完成「啟動單一 interval 並倒數到零」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 `startButton` 的 click handler（TASK-01 區塊） 與 script.js，最後重跑原操作。
  5. E｜驗收：每秒扣一且連按不加速，零時自動停止

完成條件：DONE-01：每秒扣一且連按不加速，零時自動停止

TIMER STATE LAB

專注倒數

10

尚未開始

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「啟動單一 interval 並倒數到零」。

前往 Checkpoint 1：完成 TASK-01

CHAPTER HANDOFF

從輪播狀態走到 Timer 生命週期

接收第 17 章：保留「資料／狀態改變 → render → DOM」的責任分工；本頁是獨立 timer 練習，不共用第 17 章 HTML。

交給第 19 章：完成後要能指出 remainingSeconds、timerId、renderTimer() 與開始／暫停／重設的生命週期；第 19 章會在獨立 FAQ 頁重用事件改狀態的讀碼方法，不重做本頁。