如何让番茄钟定时器的时间间隔按顺序执行？

你的问题核心是同时启动了三个定时器，它们互相干扰修改同一个时间变量和DOM元素，导致渲染混乱。要实现按序执行的番茄钟，推荐用Promise + async/await链式控制每个阶段，或者用React状态管理切换阶段，下面给出两种可行方案：

方案一：Promise链式执行（基于原代码改造） #

重构start函数让它返回Promise，这样就能等待每个倒计时阶段结束后再启动下一个：

重构后的代码 #

import { useEffect, useRef } from 'react';

const Timer = ({ timeData }) => {
  const intervalRef = useRef(null);
  const currentTime = useRef(0);
  const timerRef = useRef(null);

  // 补零函数，确保时间格式为两位数字
  const validateTime = (num) => num.toString().padStart(2, '0');

  // 改造start函数，返回Promise
  const start = (time) => {
    return new Promise((resolve) => {
      currentTime.current = time;
      // 先清理可能存在的旧定时器
      if (intervalRef.current) clearInterval(intervalRef.current);

      intervalRef.current = setInterval(() => {
        const minutes = Math.floor(currentTime.current / 60);
        const seconds = currentTime.current % 60;
        // 更新DOM
        timerRef.current.innerHTML = `${validateTime(minutes)}:${validateTime(seconds)}`;

        currentTime.current--;

        // 倒计时结束时清理定时器并resolve
        if (currentTime.current < 0) {
          clearInterval(intervalRef.current);
          intervalRef.current = null;
          resolve();
        }
      }, 1000);
    });
  };

  useEffect(() => {
    const runSequence = async () => {
      // 按顺序执行三个阶段
      await start(3); // 3秒倒计时
      await start(timeData.workTime); // 工作时长
      await start(timeData.restTime); // 休息时长
      // 如果需要循环执行，在这里添加逻辑：
      // runSequence();
    };

    runSequence();

    // 组件卸载时清理定时器，防止内存泄漏
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [timeData.workTime, timeData.restTime]);

  return <div ref={timerRef}>00:00</div>;
};

方案二：React状态管理（更符合React数据流） #

放弃直接操作DOM，用React状态管理当前时间和阶段，通过监听状态变化自动切换阶段：

代码示例 #

import { useEffect, useState, useRef } from 'react';

const Timer = ({ timeData }) => {
  const [currentTime, setCurrentTime] = useState(0);
  const [currentPhase, setCurrentPhase] = useState('countdown'); // 可选值: countdown/work/rest
  const intervalRef = useRef(null);

  const validateTime = (num) => num.toString().padStart(2, '0');

  const startTimer = (time, phase) => {
    setCurrentPhase(phase);
    setCurrentTime(time);
    // 清理旧定时器
    if (intervalRef.current) clearInterval(intervalRef.current);
    // 启动新定时器
    intervalRef.current = setInterval(() => {
      setCurrentTime(prev => {
        if (prev <= 0) {
          clearInterval(intervalRef.current);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
  };

  // 监听时间归0，自动切换到下一个阶段
  useEffect(() => {
    if (currentTime === 0) {
      switch(currentPhase) {
        case 'countdown':
          startTimer(timeData.workTime, 'work');
          break;
        case 'work':
          startTimer(timeData.restTime, 'rest');
          break;
        case 'rest':
          // 这里可以选择重置到倒计时阶段，或者停止
          // startTimer(3, 'countdown');
          break;
        default:
          break;
      }
    }
  }, [currentTime, currentPhase, timeData]);

  // 初始化启动倒计时
  useEffect(() => {
    startTimer(3, 'countdown');
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, []);

  const minutes = Math.floor(currentTime / 60);
  const seconds = currentTime % 60;

  return <div>{validateTime(minutes)}:{validateTime(seconds)}</div>;
};

原代码问题分析 #

1. 连续三次调用start，同时创建三个独立的setInterval，它们会同时修改currentTime.current和DOM元素，导致时间值被覆盖，渲染混乱。
2. 没有处理组件卸载时的定时器清理，容易造成内存泄漏。
3. 直接操作DOM（timerRef.current.innerHTML）不符合React的状态驱动渲染理念，建议尽量用状态管理UI。

内容的提问来源于stack exchange，提问作者bl4z3rr666