啟動前阻擋重複 timer
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
CHAPTER 18 · 240 MINUTES
Timer、狀態與重複啟動排錯
本章共 240 分鐘：課次 18 完成 Timer 核心，課次 19 前 60 分鐘專做重複 interval、清理與狀態不同步除錯。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
暫停後可從原秒數繼續
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
重設回初始值且倒數到零自動停止
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
PROBLEM & ANALOGY
先理解責任，再寫語法
setInterval 像重複響的鬧鐘，timer id 是鬧鐘編號；暫停是關掉鬧鐘但保留秒數，重設則連秒數一起回到起點。
本章要解決：本章共 240 分鐘：課次 18 完成 Timer 核心，課次 19 前 60 分鐘專做重複 interval、清理與狀態不同步除錯。
接住上一章：第 17 章以索引與 render 管理輪播畫面。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- setInterval
- 按照固定時間重複執行倒數函數。
- timer id
- 用來停止目前 interval 的識別值。
- state
- 保存秒數、開始與暫停等目前狀態。
- pause
- 停止計時但保留目前秒數。
- reset
- 清除舊 timer、重設資料並重畫畫面。
SCOPE
今天的學習邊界
能自己完成
啟動前阻擋重複 timer；暫停後可從原秒數繼續；重設回初始值且倒數到零自動停止。
看得懂即可
能辨識 setTimeout 一次與 setInterval 重複的差別。
刻意延後
不教精密計時、背景分頁校正或非同步事件迴圈細節。
本章術語：setInterval、clearInterval、timer id、state、null、render。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- remainingSeconds 是資料，timerId 記錄有沒有計時器正在跑。
- 停止時同時 clearInterval 並把 timerId 設回 null。
- 所有秒數變化最後都呼叫 render，避免資料與畫面不同步。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：先拿掉重複啟動防護，連按三次開始，觀察一秒扣三格；在 console 記錄三個 timer id 後修正。
- 連按會加速：啟動前檢查 timerId 是否不是 null。
- 暫停後不能再開始：檢查 clear 後是否設回 null。
- 重設只改畫面：確認 remainingSeconds 資料也回到初始值。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
倒數越按越快
先查：檢查是否已有 interval，再看 start 是否清除舊 timer。
暫停後不能繼續
先查：確認 pause 保留秒數，resume 重新建立一個 timer。
重設後仍在倒數
先查：確認 reset clearInterval 且 timer id 已清空。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我已列出尚未開始、倒數、暫停與完成。
- 我知道 timer id 放在哪裡。
- 我會測試連按 start、pause、resume。
- 我會在任何狀態按 reset。
啟動單一 interval 並倒數到零
檔案：script.js
位置：依任務文字搜尋對應元素或函式
結果：每秒扣一且連按不加速，零時自動停止
完成可再次開始的暫停
檔案：script.js
位置：依任務文字搜尋對應元素或函式
結果：暫停保留秒數，之後可繼續
重設資料、timer 與畫面
檔案：script.js
位置：依任務文字搜尋對應元素或函式
結果：任何狀態下都回到 10 秒與尚未開始
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
目前 state 是 ______；timer id ______ 代表 ______；reset 會先 ______，再 ______。
時間功能證據要包含生命週期；只截一張數字畫面無法證明沒有重複 timer。
現場快速連按開始、暫停後繼續、最後重設；口頭說明 remainingSeconds 與 timerId 的不同。
下一章：第 19 章會閱讀舊站 jQuery，對照相同的事件與 class 狀態概念。