如何从 useEffect 中删除多个 setIntervals

Question

我正在将多个动物加载到我的 ThreeJS 项目中。所有这些动物都具有带有 setInterval 函数的 PositionalAudio。我在 useEffect 函数中使用它们。在回调上我想清除间隔，但它一直在调用函数。

这是我设置 setInterval 的函数：

const loadAudio = () => { 
  const animalSound = new THREE.PositionalAudio(listener);
  animalSound.setBuffer(animalBuffer);
  playSounds = setInterval(() => {
    animalSound.play();   
  } , 5000);
  audios.push(animalSound);
}

在return函数中我尝试清除区间：

return () => {
  audios.forEach((audio) => {
    audio.stop();
    clearInterval(playSounds);
  });
};

遗憾的是，音频一直每 5 秒播放一次

这是一个代码片段

https://codesandbox.io/s/bitter-tree-bb4ld?file=/src/App.js

Answer 1

根据您的代码片段，假设您有 Button：

  <button
    onClick={buttonToggle}
    >
    {start ? 'start' : 'stop'}
  </button>

最初我们对 useState 和 handle click 函数进行了一些设置

  const [seconds, setSeconds] = useState(0);
  const [btnStart, setBtnStart] = useState(true);
  
  const buttonToggle = useCallback(
    () => setBtnStart(run => !run)
  , []);

在 useEffect 中，您将进行以下更改

  useEffect(() => {
    if(!btnStart) {
      // setSeconds(0); // if you want to reset it as well
      return;
    }
    
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, [btnStart]);

如何从 useEffect 中删除多个 setIntervals

How do I remove multiple setIntervals from useEffect

reactjs

three.js

setinterval

clearinterval