javascript - 如果函数中设置了间隔，如何清除函数组件中的间隔？

Question

我知道在 useEffect 中启动一个间隔很容易被清除，如下所示:

useEffect(() => {
   const interval = setInterval(some function, time);
   return () => clearInterval(interval)
})

但是如果我必须在函数内设置一个间隔怎么办，在这种情况下如何清除间隔，或者只是我不需要？

const startGame = () => {
  const interval = setInterval(some function, time);
}

useEffect(() => {
  startGame()
})

Answer 1

您可以使用useEffect钩子(Hook)来清除间隔

   import React, { useEffect } from "react";

    const Timer = () => {
      const interval = React.useRef();
      const startGame = () => {
        interval.current = setInterval(() => {
          //code
        }, 3000);
      };
      React.useEffect(() => {
        return () => {
          clearInterval(interval.current);
        };
      }, []);
    };
    
    export default Timer;