学习笔记：用 JavaScript 做一个简单可靠的倒计时

做倒计时练习时，我先想清楚一个问题：时间应该由谁说了算？如果用一个变量每秒加一，页面卡顿或标签页被切到后台时，计时就会越走越偏。更稳妥的做法，是记录一个结束时间点，每次刷新显示时用结束时间减去当前时间，算出剩余的分钟和秒数。这样即使中间有延迟，显示结果也能自动回到正确值。

开始、暂停、重置三个操作，对应的其实是三种状态。开始时算出结束时间并启动定时器；暂停时先停掉定时器，并把当前剩余时间保存下来；重置时停掉定时器，把剩余时间恢复成初始值。状态分开写，代码读起来也更清楚。

切换专注和休息，本质上就是换一个初始时长。专注用 25 分钟，休息用 5 分钟，切换时同样先停掉旧的定时器，再按新的时长重置。这样就不会出现两个定时器同时跑、时间跳变的问题。

这个小练习给我的启发是：先把状态和时间来源想清楚，再写界面。界面只是把剩余时间显示出来，真正的逻辑在状态切换里。