CHAPTER 18 · PRACTICE WORKSPACE

Timer、狀態與重複啟動排錯

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

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

FOCUS TASK · TASK-03

現在只處理：重設資料、timer 與畫面

修改：script.js

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

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

資料、timer、畫面｜重設要同步

比較：重設不是只改畫面文字，還要清除 timer 並把資料狀態回到初始值。

現在做：在 solution/script.js 暫時註解重設 handler 裡的 stopTimer();，重新整理後開始倒數再按重設；觀察畫面回到 10 但數字仍會繼續下降，恢復後再重跑。

看預期與證據

預期：只重畫或只改秒數都可能留下背景 interval；恢復 stopTimer() 後 reset 同時清 timer、回初始秒數與更新狀態文字。

證據：錄下 reset 後約兩秒的數字：錯誤版本不是 10 或仍在變，正確版本維持 10；口述 reset 的資料、timer、畫面三項責任。

任意狀態 vs 初始狀態｜邊界回歸

比較：從開始、暫停與倒數中途都按重設，結果都應回到同一個可預測起點。

現在做：在 solution 依序做三次邊界驗收：開始後約 1.1 秒按重設；開始後約 1.1 秒按暫停再按重設；把 remainingSeconds 暫設為 1 讓它歸零後再按重設。每次都記錄數字與狀態文字。

看預期與證據

預期：從倒數中、暫停中與完成後重設，都回到 10 與「尚未開始」，且 reset 後數字不再下降；三條路徑共享同一個可預測起點。

證據：交一張三列驗收表或短錄影，列出每個前置狀態、reset 後的 timer-number／timer-status 與是否仍在倒數。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 2 倒數約三秒後暫停並重新開始，確認續跑正常；再於非 10 秒狀態按重設，觀察因 handler 尚未完成，資料、timer 與畫面尚未復原。
  2. B｜預測：在倒數、暫停與歸零三種狀態按重設，確認都回到 10 秒。
  3. C｜實作：在 script.js 的 `resetButton` 的 click handler（TASK-03 區塊） 完成「重設資料、timer 與畫面」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 `resetButton` 的 click handler（TASK-03 區塊） 與 script.js，最後重跑原操作。
  5. E｜驗收：任何狀態下都回到 10 秒與尚未開始

完成條件：DONE-03：任何狀態下都回到 10 秒與尚未開始

TIMER STATE LAB

專注倒數

10

尚未開始

CONTINUE

繼續完成 TASK-03

前往 Solution，依要求完成「重設資料、timer 與畫面」。

前往 Solution：完成 TASK-03

CHAPTER HANDOFF

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

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

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