代码之家 › 专栏 › 技术社区 › twominds

组件卸载时停止setInterval()(反应)

intervals reactjs javascript

twominds · 技术社区 · 3 年前

我期待停止一个间隔功能时,我的网站上的用户改变了网页。我在网上搜索了“如何判断react元素在屏幕上是否可见”,但我只能找到交叉点观察者的结果。当react组件卸载时,是否有方法停止间隔函数(我相信卸除是当组件不再呈现时?)

以下是我的组件间隔:

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

目前,我用一个交叉点观察器来设置它,这样当它不可见时就不会分派函数。但是页面更改时间隔仍然运行?

2 回复 | 直到 3 年前

iz_ 3 年前

需要从效果中返回清理函数:

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

twominds 3 年前

算了吧,哈哈,我才知道 return () => a的功能 useEffect() componentWillUnmount 部分。

tutorial

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

推荐文章

dan · 按距离截止对线性间隔进行分组

2 年前

CodeRic · 导航时的clearInterval()。推式反应器

2 年前

rayray · 查找Swift 4中作为字符串存储的2次之间的差异

6 年前

kjdion84 · 间隔造成的不必要延迟

6 年前

Hans Wurst · Numpy查找数组小范围内最大值的索引

6 年前

Leron · 查找最长重叠周期

6 年前

Banana jqurious · 为什么Pyinterval算术在numpy中失败。浮动64

6 年前

Mohammed · Oracle查询中的H2加减间隔秒

6 年前

Pau RS · 基于间隔重叠合并两个数据帧

6 年前

LookIntoEast · 不超过覆盖范围限制的最大间隔子集?

6 年前