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

Question

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

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

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

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

Answer 1

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

const countDownRef = React.useRef();

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

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