如何实现 Pomodoro 番茄计时器中工作与休息阶段的顺序执行？
本文深入解析在 React 框架中，如何正确串联多个倒计时阶段（例如准备→工作→休息），有效解决因 setInterval 异步竞争导致的逻辑错乱问题。我们将通过 Promise 链式调用与 clearInterval 精准控制，实现稳定、可预测的阶段自动流转。
在开发 Pomodoro 番茄工作法计时器时，许多开发者容易陷入一个常见误区：试图连续调用多个 setInterval 函数，例如先启动准备倒计时，紧接着启动工作倒计时，再启动休息倒计时，并期望它们能自动排队顺序执行。然而实际结果往往是界面渲染混乱、阶段莫名跳转、计时状态被意外覆盖——正如您所遇到的，timeData.workTime 和 timeData.restTime 并未按照预设的顺序执行。
问题的根本原因在于，setInterval 是非阻塞的异步调用。当您连续触发多个定时器时，它们几乎会同时开始计时，形成一种“竞争关系”，逻辑错乱便不可避免。因此，真正的解决方案并非强行“同步”这些定时器，而是转变思路，将整个倒计时流程视为一个可组合、可顺序等待的异步任务序列。我们推荐使用基于 Promise 的封装方案，配合 clearInterval 进行精确的生命周期管理，确保前一个阶段完全结束（倒计时归零且资源清理完毕）后，才启动下一个阶段。
以下是优化后的核心实现代码：
// 将单个阶段倒计时封装为 Promise（返回剩余时间，便于调试与功能扩展） const runCountdown = (duration: number): Promise=> { return new Promise((resolve) => { const timerId = setInterval(() => { if (duration <= 0) { clearInterval(timerId); resolve(); return; } // 更新 UI（建议使用 useState 或 useReducer 管理计时器状态） setCurrentTime(duration); duration--; }, 1000); }); }; // 在 useEffect 钩子中按顺序执行各阶段（注意：需配合状态管理触发重新渲染） useEffect(() => { const executeSequence = async () => { await runCountdown(3); // 准备倒计时（3秒） await runCountdown(timeData.workTime * 60); // 工作时长（单位转换为秒） await runCountdown(timeData.restTime * 60); // 休息时长（单位转换为秒） // 可在此处触发完成回调，例如播放提示音、切换全局状态等 }; executeSequence(); }, [timeData.workTime, timeData.restTime]);
当然，在实现过程中有几个关键细节需要特别注意，否则仍可能遇到问题：
- 遵循数据驱动原则：避免在原代码中直接操作 DOM，例如使用 timerRef.current.innerHTML = ... 这类命令式写法。正确做法是使用 useState
来管理 currentTime 状态，让 React 负责安全、高效地触发视图更新。 - 必须清理定时器资源：每一个 setInterval 都必须有对应的 clearInterval 调用（如上例中的 clearInterval(timerId)）。否则不仅会导致内存泄漏，多个阶段的定时器还可能并行运行，再次造成状态失控。
- 注意时间单位统一：timeData.workTime 通常存储的是分钟数，需要乘以 60 转换为秒，才能与 1000 毫秒的计时间隔匹配。这是一个容易被忽略的细节。
- 确保响应式更新：useEffect 的依赖项数组务必包含 timeData.workTime 和 timeData.restTime。这样，当配置数据变更时，整个计时序列会自动重启，保证用户界面与数据始终保持同步。
- 进阶：构建更健壮的实现：可以考虑引入 AbortController 来支持手动暂停或取消计时，或者将核心逻辑抽象成自定义 Hook（例如 useCountdown），以提高代码的复用性和可维护性。
本质上，Pomodoro 计时器的阶段流转是一个有向无环的状态机模型，而非多个并发定时器的简单叠加。通过 async/await 和 Promise 显式地表达时序依赖关系，再结合受控的状态更新与严格的资源清理机制，您就能构建出逻辑清晰、运行稳定且易于维护的计时器核心逻辑。
