useEffect内clearTimeout无法正常清除定时器问题求助

原代码问题分析 #

你的代码逻辑存在闭包变量作用域的问题：

useEffect(() => {
    const closeFeedbackTimer = setTimeout(() => {
      console.log('test')
    }, 5000)

    if (!finishedFeedbackOpen) {
      clearTimeout(closeFeedbackTimer)
    }
  }, [finishedFeedbackOpen])

每次finishedFeedbackOpen变化时，useEffect都会重新执行一次，每次执行都是一个独立的闭包：

1. 当finishedFeedbackOpen为true时，创建定时器，此时这个定时器的引用只存在于当前闭包的closeFeedbackTimer变量中
2. 当finishedFeedbackOpen变为false时，新的useEffect执行，会先创建一个全新的定时器，然后立刻清除这个刚创建的定时器——但之前true状态下创建的那个定时器，因为没有被当前闭包引用，根本没被处理，所以会继续运行到5秒后执行

正确修复方案 #

利用useEffect的清理函数（返回的函数）来处理定时器的清除，这个清理函数会在组件卸载或者依赖项变化时自动执行，刚好可以用来清除上一次闭包中创建的定时器：

useEffect(() => {
  let closeFeedbackTimer;
  // 只有当状态为true时，才创建定时器
  if (finishedFeedbackOpen) {
    closeFeedbackTimer = setTimeout(() => {
      console.log('test')
    }, 5000);
  }

  // 清理函数：每次依赖变化/组件卸载时，清除之前的定时器
  return () => {
    clearTimeout(closeFeedbackTimer);
  };
}, [finishedFeedbackOpen]);

简化写法 #

也可以用三元表达式简化逻辑，效果完全一致：

useEffect(() => {
  const timer = finishedFeedbackOpen 
    ? setTimeout(() => console.log('test'), 5000)
    : undefined;

  return () => clearTimeout(timer);
}, [finishedFeedbackOpen]);

核心逻辑是：每次useEffect执行前，先通过清理函数清除上一次可能存在的定时器，再根据当前状态决定是否创建新的定时器，这样就不会出现遗漏旧定时器的情况。

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