离开后反应间隔不停止

Question

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

密码是：

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

我正在考虑制作一个空 span 的动画，然后使用 onAnimationIteration 触发保存。

Answer 1

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


const funRef = useRef(null);

//...

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

更多：

Answer 2

您并没有真正给我们提供很多工作背景（例如，“离开组件”是什么意思？），所以我们有点摸不着头脑。

但是，作为第一步，您可以尝试声明timer变量全局:

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

离开后反应间隔不停止

React Interval not stopping after Leaving

javascript

setinterval

reactjs

react-hooks