如何在setInterval结束后执行函数？实现倒计时结束日志功能

我来帮你搞定这个倒计时的问题～你的代码里有几个小细节需要调整，我一步步给你理清楚：

原代码的核心问题 #

1. 定时器被提前清除：你在setInterval的回调里直接调用了clearInterval(interval)，这会导致定时器只执行一次就被关掉，根本没法持续倒计时。
2. 状态更新的闭包问题：update函数里直接使用time状态值，由于React状态更新是异步的，会导致你拿到的time不是最新值，计算出来的时分秒会出错。
3. 缺少时间到0的处理逻辑：没有在time变为0时触发日志输出，也没在此时正确停止定时器。

修正后的完整代码 #

import { useState, useEffect } from 'react';

const CountdownTimer = () => {
  const startingMinutes = 1;
  const startingHours = 0;
  const [hours, setHours] = useState(startingHours);
  const [minutes, setMinutes] = useState(startingMinutes);
  const [seconds, setSeconds] = useState(0);
  const [time, setTime] = useState(startingHours * 3600 + startingMinutes * 60);

  const update = () => {
    // 使用函数式更新获取最新的time值，避免闭包陷阱
    setTime(prevTime => {
      const newTime = prevTime - 1;
      // 重新计算时分秒
      setHours(Math.floor(newTime / 3600));
      const remainingSecondsAfterHours = newTime % 3600;
      setMinutes(Math.floor(remainingSecondsAfterHours / 60));
      setSeconds(remainingSecondsAfterHours % 60);
      return newTime;
    });
  };

  useEffect(() => {
    const interval = setInterval(() => {
      if (time > 0) {
        update();
      } else {
        // 时间归0时输出日志并停止定时器
        console.log("Time finished");
        clearInterval(interval);
      }
    }, 1000);

    // 组件卸载时自动清除定时器，防止内存泄漏
    return () => clearInterval(interval);
  }, [time]); // 依赖time，确保回调能拿到最新的时间值

  return (
    <div className="timer">
      {hours}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}
    </div>
  );
};

export default CountdownTimer;

关键改动说明 #

• 函数式更新状态：用setTime(prevTime => ...)替代直接使用time，这样每次都能获取到最新的状态值，解决闭包导致的更新错误。
• 正确管理定时器生命周期：
  • 当time变为0时，立刻清除定时器并输出Time finished；
  • 在useEffect的返回函数中添加清除逻辑，避免组件卸载后定时器仍在运行造成内存泄漏。
• 修正时分秒计算：原代码中剩余秒数的计算有误，现在用newTime % 3600先去掉小时部分，再计算分钟和秒，结果更准确。
• 添加依赖数组：useEffect的依赖里加上[time]，确保每次time更新后，定时器回调能感知到最新值。

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