ReactJS：实现按钮触发的超时重置功能遇到问题

你的需求本质是实现**防抖（debounce）**的基础逻辑：连续点击按钮时，只有最后一次点击结束后等待5秒，才会执行目标函数。下面针对你的问题逐一分析，并给出正确实现方式：

你之前尝试的问题分析 #

1. 初始代码：用useState标记超时是否启动，但这个状态只能标记状态，无法获取到之前创建的timeout ID，所以没法在再次点击时清除旧超时，导致点击无效。
2. 修改后代码：在声明变量timeout之前就调用clearTimeout(timeout)，属于变量未声明就使用的语法错误，自然报错。
3. 再次修改代码：每次点击都会重新声明let timeout，初始值是undefined，clearTimeout(undefined)不会有任何效果，所以每次点击都会创建新的超时，最终多个超时同时运行。

正确实现方式：用useRef保存超时ID #

在React函数组件中，要跨渲染周期保存变量（比如timeout ID），应该使用useRef，它的current属性不会随组件重渲染而重置，正好适合保存超时ID。

完整代码示例 #

import { useRef, useEffect } from 'react';

function YourComponent() {
  // 用useRef保存timeout ID，初始为null
  const timeoutRef = useRef(null);

  const handleButtonClick = () => {
    // 先清除之前的超时（如果存在）
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
      console.log('已重置超时');
    }

    // 设置新的5秒超时
    timeoutRef.current = setTimeout(() => {
      // 这里写超时结束后要执行的逻辑
      console.log('超时完成，执行处理函数');
      // 执行完后可以把timeoutRef设为null（可选）
      timeoutRef.current = null;
    }, 5000);

    console.log('按钮已点击，启动/重置超时');
  };

  // 组件卸载时清除超时，避免内存泄漏
  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return <button onClick={handleButtonClick}>点击触发超时</button>;
}

代码说明 #

• useRef创建的timeoutRef会在组件整个生命周期内保持引用，每次点击时都能获取到上一次的超时ID。
• 每次点击按钮，第一步就是清除之前的超时，确保只有最后一次点击的超时会生效。
• 组件卸载时通过useEffect返回的清理函数清除超时，防止组件卸载后超时回调还执行，造成内存泄漏。

为什么不用useState？ #

useState的更新会触发组件重渲染，而保存超时ID这个操作不需要触发重渲染，useRef是更轻量、合适的选择。如果强行用useState保存timeout ID，每次更新都会导致组件重新渲染，没必要也影响性能。

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