如何实现 Pomodoro 计时器中工作与休息阶段的顺序执行？

如何实现 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 管理 timer 状态）
      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 = ... 的做法，违背了 React 数据驱动的原则。正确的做法是使用 useState 来管理 currentTime，让 React 负责安全地触发视图更新。
• 定时器清理是必须的：每一个 setInterval 都必须有对应的 clearInterval（就像上面例子里的 clearInterval(timerId)）。否则，不仅会导致内存泄漏，多个阶段的定时器还会并行运行，局面再次失控。
• 注意时间单位转换：timeData.workTime 通常存储的是分钟数，需要乘以 60 转换为秒，才能和 1000 毫秒的间隔匹配上，这是个常见的疏忽点。
• 保证响应式更新：useEffect 的依赖项数组务必包含 timeData.workTime 和 timeData.restTime。这样，当配置变更时，整个计时序列会自动重启，确保 UI 与数据同步。
• 迈向更健壮的实现（进阶）：可以考虑引入 AbortController 来支持手动暂停或取消计时，或者将逻辑抽象成自定义 Hook（例如 useCountdown），以便在多个组件中复用。

说到底，Pomodoro 的阶段流转本质上是一个有向无环的状态机，而不是一堆并发定时器的简单堆叠。用 async/await 和 Promise 来显式地表达时序依赖关系，再辅以受控的状态更新和严格的资源清理，你就能写出逻辑清晰、运行可靠且易于维护的计时器核心逻辑。