调用 clearInterval 后 setInterval 继续运行答案

【问题标题】：setInterval keeps on running after clearInterval called调用 clearInterval 后 setInterval 继续运行
【发布时间】：2021-03-01 08:25:54
【问题描述】：

这是一个sn-p的代码：

var interval3 = null;

React.useEffect(() => {
    if(running) {
    if(interval3) clearInterval(interval3);    
    interval3 = setInterval(() => {
         console.log('running')
      }, 1000);}
      else {
        clearInterval(interval3)
      }  
    
}, [running]);

我检查了其他帖子中建议的解决方案，但没有一个有效。

【问题讨论】：

如果你在函数式组件的主体中声明了一个变量，那么每次组件重新渲染时它都会被重新制作。如果您希望变量在渲染之间保持不变，则需要将其存储在 ref

标签： javascript reactjs setinterval use-effect

【解决方案1】：

您可以使用状态值来跟踪和保存间隔的 id。详情请查看下方。

  const [id, setId] = useState(null);

  useEffect(() => {
    if (running) {
      if (id) return;
      const intervalId = setInterval(() => {
        console.log('running');
      }, 1000);
      setId(intervalId)
    } else {
      setId(null);
      clearInterval(id);
    }
  }, [running, id]);

【讨论】：