javascript - 我需要从不同的函数调用 ClearInterval

Question

我正在创建一个倒计时器，我需要从不同的函数调用clearInterval，因为我想使用两个不同的按钮开始和暂停倒计时

这是我的一段代码

const startCountdown = () => {
    const countdown = setInterval(() => {
      setSecondsElapsed(secondsElapsed => secondsElapsed - 1);
    }, 1000);
  };

  const pauseCountdown = () => {
    clearInterval(countdown);
  };

当我按下初始按钮时，倒计时开始，但当我按下调用 pauseCountdown() 的按钮时，倒计时不会暂停

Answer 1

使用 React ref 来保存计时器引用。设置间隔时，将倒计时引用存储为引用的当前值，并在其他函数中使用引用的当前值清除间隔。

const countDownRef = React.useRef();

const startCountdown = () => {
  countDownRef.current = setInterval(() => {
    setSecondsElapsed(secondsElapsed => secondsElapsed - 1);
  }, 1000);
};

const pauseCountdown = () => {
  clearInterval(countDownRef.current);
};