CHAPTER 18 · PRACTICE WORKSPACE

Timer、狀態與重複啟動排錯

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

02 Checkpoint 1 1/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；先核對可見結果，再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理：完成可再次開始的暫停

修改：script.js

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

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

暫停 vs 重設｜生命週期不同

比較：暫停保留目前秒數，重設才回到初始值；按鈕行為要分開驗證。

現在做：在 checkpoint-2/script.js 的暫停 handler 暫時加入 remainingSeconds = initialSeconds; renderTimer();，重新整理、倒數到 7 秒後按暫停；觀察錯誤地跳回 10，再移除兩行重跑。

看預期與證據

預期：加入錯誤重設時會看見暫停破壞目前秒數；移除後暫停保留 7 秒，能清楚區分 pause 的保留責任與 reset 的回初始責任。

證據：保留 7 秒暫停前後的畫面或口述：錯誤版本回 10，正確版本保留原秒數；指出兩個按鈕不可共用同一個資料重設動作。

clearInterval vs 再次開始｜避免加速

比較：停止舊 interval 後才能建立下一個，否則每秒可能被多個 callback 同時扣除。

現在做：在 checkpoint-2/script.js 暫時註解暫停 handler 裡的 stopTimer();，重新整理後開始倒數、按暫停，等待兩秒觀察數字仍繼續變；恢復 stopTimer() 後再重跑。

看預期與證據

預期：缺少清理時畫面雖顯示「已暫停」但 interval 仍扣秒；恢復後秒數停止且可從原值重新開始，能說出 clearInterval 與 timerId 清空是同一個停止責任。

證據：截圖或錄影比較暫停後兩秒的數字：錯誤版本仍變、正確版本不變；口述為何 pause 必須呼叫 stopTimer()。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 1 啟動倒數並快速連按開始，確認每秒只扣一次；接著在倒數中按暫停，觀察因 handler 尚未完成，數字仍會繼續變。
  2. B｜預測：倒數中按暫停、等待兩秒再繼續，確認秒數保留且可續跑。
  3. C｜實作：在 script.js 的 `pauseButton` 的 click handler 與 `stopTimer()`（TASK-02 區塊） 完成「完成可再次開始的暫停」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 `pauseButton` 的 click handler 與 `stopTimer()`（TASK-02 區塊） 與 script.js，最後重跑原操作。
  5. E｜驗收：暫停保留秒數，之後可繼續

完成條件：DONE-02：暫停保留秒數，之後可繼續

TIMER STATE LAB

專注倒數

10

尚未開始

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「完成可再次開始的暫停」。

前往 Checkpoint 2：完成 TASK-02

CHAPTER HANDOFF

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

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

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