离开后反应间隔不停止答案

【问题标题】：React Interval not stopping after Leaving离开后反应间隔不停止
【发布时间】：2020-11-23 08:58:25
【问题描述】：

我的问题是我在useEffect 中使用的间隔在离开组件时没有停止。

代码是：

useEffect(() => {
    const timer = window.setInterval(() => {
      refreshSave();
    }, 3000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

我正在考虑为空的span 设置动画，然后使用onAnimationIteration 触发保存。

【问题讨论】：

这能回答你的问题吗？ How to clean up setInterval in useEffect using react hooks
如果您杀死您的开发服务器，清除缓存/硬重新加载浏览器选项卡/窗口，然后重新启动本地开发服务器，问题是否仍然存在？我没有看到您的代码有任何问题，但我已经看到在“间歇性”保存/热重载期间浏览器设置和保持间隔的位置。
“离开组件”是什么意思，给我们看可重现的代码How to create a Minimal, Reproducible Example
如果@ShahnawazHossan 引用的答案对您没有帮助，我认为结合使用 clearInterval (developer.mozilla.org/en-US/docs/Web/API/…) 和 useEffect 中的 return 语句来模拟 componentWillUnmount (dev.to/robmarshall/…) 应该可以解决问题.

标签： javascript reactjs react-hooks setinterval

【解决方案1】：

我之前遇到过类似的问题，通过使用 useRef 钩子解决了。


const funRef = useRef(null);

//...

useEffect(() => {
    funRef.current = setInterval(() => {
      refreshSave();
    }, 3000);
    return () => {
     clearInterval(funRef.current);
    };
  }, []);

了解更多：timer app

【讨论】：

【解决方案2】：

您并没有真正给我们提供太多的工作背景（例如，“离开组件”是什么意思？），所以我们有点在黑暗中拍摄。

不过，作为第一步，您可以尝试全局地声明timer变量：

let timer;     // <- put here
useEffect(() => {
    timer = window.setInterval(() => {
      refreshSave();
    }, 3000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

【讨论】：