React：如何清除点击事件中设置的Timeout？

要解决点击事件里设置的Timeout在组件卸载时无法取消的问题，核心思路是用useRef保存Timeout的ID，再配合useEffect在组件卸载时执行清理操作，具体方案如下：

• 用useRef存储Timeout ID
  useRef的值在组件整个生命周期里保持不变，不会因组件重渲染重置，刚好适合存储Timeout的唯一标识。

• 组件卸载时清理Timeout
  通过useEffect返回清理函数，在组件卸载时调用clearTimeout并传入保存的Timeout ID，就能终止未执行的延迟操作。

• 可选优化：处理多次点击场景
  如果用户多次点击按钮，建议先清除之前未执行的Timeout，避免多个延迟逻辑同时触发，提升交互体验。

完整代码示例：

import { useRef, useEffect } from 'react';

export default function SomeComponent() {
  // 用useRef存储timeout ID
  const timeoutRef = useRef(null);

  const onClick = () => {
    // 先清除之前的timeout（如果存在）
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    // 保存新的timeout ID
    timeoutRef.current = setTimeout(() => {
      // 执行你的业务逻辑，比如API调用
      console.log('执行延迟操作');
      // 执行完毕后清空ref，避免不必要的内存占用
      timeoutRef.current = null;
    }, 2500);
  };

  // 组件卸载时清理timeout
  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return (
    <div><button onClick={onClick}>Click me!</button></div>
  );
}

说明：

• timeoutRef.current会记录每次点击生成的Timeout ID，多次点击时先清除旧的，确保只有最新的延迟操作会执行。
• useEffect的依赖项为空数组，意味着清理函数只会在组件卸载时触发，精准匹配“组件卸载时终止操作”的需求。

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