React中onClick事件无法清除递归setTimeout定时器问题

问题根因 #

节拍器无法停止的核心原因是变量存储生命周期和副作用执行逻辑不匹配：

• 原代码中timeout是useEffect回调内的局部变量，组件每次重渲染都会重新执行useEffect逻辑，上一轮递归setTimeout返回的ID会被直接回收，执行clearTimeout时根本拿不到正在运行的定时器ID
• 用useState存储timeout ID会触发组件重渲染，重渲染又会触发新的定时器创建，直接进入无限重渲染死循环
• 原代码useEffect没有传依赖数组，每次组件渲染都会执行副作用，会重复生成大量无引用的冗余定时器
• 原代码错误地将包裹setTimeout的函数赋值给timeout变量，clearTimeout无法识别函数类型参数，必须传入setTimeout返回的数字类型ID才能生效

修复方案 #

使用useRef存储跨渲染周期需要保留、且修改不需要触发重渲染的运行时变量（定时器ID、预期时间戳等），给useEffect配置正确的依赖数组，同时在副作用清理函数中统一清除定时器。

修复后完整代码 #

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

function Metronome() {
  const [isRunning, setIsRunning] = useState(false);
  // 用ref存储跨渲染保留的运行时变量，修改不会触发重渲染
  const timeoutIdRef = useRef(null);
  const expectedTimeRef = useRef(0);
  const tempo = 100;
  const msTempo = 60000 / tempo;

  // 音频播放逻辑封装为稳定函数，避免渲染时误触发
  const playDrum = () => {
    new Audio("./sounds/drum.wav").play().catch(() => {});
  };

  useEffect(() => {
    // 递归调度逻辑
    const tick = () => {
      playDrum();
      // 计算时间漂移
      const drift = Date.now() - expectedTimeRef.current;
      // 更新下一次的预期触发时间
      expectedTimeRef.current += msTempo;
      // 直接存储setTimeout返回的ID到ref，不要存包裹函数
      timeoutIdRef.current = setTimeout(
        tick, 
        Math.max(0, msTempo - drift) // 兼容漂移超过间隔的极端情况，避免传入负的延迟时间
      );
    };

    if (isRunning) {
      // 启动时初始化第一次预期触发时间
      expectedTimeRef.current = Date.now() + msTempo;
      timeoutIdRef.current = setTimeout(tick, msTempo);
    }

    // useEffect清理函数：状态切换/组件卸载时自动清除正在运行的定时器
    return () => {
      if (timeoutIdRef.current) {
        clearTimeout(timeoutIdRef.current);
        timeoutIdRef.current = null;
      }
    };
  }, [isRunning, msTempo]); // 仅在运行状态、速度变化时重新执行副作用

  const handleClick = () => {
    setIsRunning(prev => !prev);
  };

  return (
    <div 
      onClick={handleClick}
      className="start-stop"
    >
      {isRunning ? 'STOP' : 'START'}
    </div>
  );
}

export default Metronome;

关键注意点 #

• 所有不需要驱动视图更新的可变运行时状态，都优先用useRef存储，不要用普通局部变量（重渲染会丢失值），也不要滥用useState（修改会触发无意义重渲染）
• 递归setTimeout必须每次都把返回的最新ID更新到ref中，保证清除操作能拿到最新的定时器句柄
• useEffect必须传入依赖数组，否则会在每次渲染时重复执行，生成大量失控的定时器
• 清除逻辑要写在useEffect的返回清理函数中，React会在依赖变化、组件卸载时自动执行清理，避免内存泄漏和定时器残留

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