时间戳

首页 > 解决方案 > 组件卸载时停止 setInterval()？（反应）

javascript - 组件卸载时停止 setInterval()？（反应）

问题描述

当我网站上的用户更改页面时，我希望停止间隔函数。我在网上搜索了“如何判断一个反应元素是否在屏幕上可见”，但我只能找到交叉路口观察者的结果。有没有办法在反应组件卸载时停止间隔函数？（ps。我相信卸载是组件不再渲染的时候？）

这是我的组件间隔：

useEffect(() => {
   const updatePostInfo =
     inView &&
      setInterval(() => {
        dispatch(getPostInfo(data._id));
  }, 3500);
!inView && clearInterval(updatePostInfo);
}, [inView]);

目前，我已经为它设置了一个交叉点观察器，这样它就不会在它不可见时调度该函数。但是当页面发生变化时，间隔仍然运行？

标签： javascriptreactjsintervals

解决方案

您需要从效果中返回一个清理函数：

useEffect(() => {
  const updatePostInfo = setInterval(() => {
    dispatch(getPostInfo(data._id));
  }, 3500);
  return () => clearInterval(updatePostInfo);
}, []);

推荐阅读