带暂停功能的本机倒数计时

Question

[从教程开始，我试图制作自己的倒数计时器，我想添加一个暂停功能。它使用了moment.js

const [time, setTime] = useState({

    eventDate: moment.duration('00:00:06'),
    days: 0,
    hours: 0,
    mins: 0,
    secs: 0,
  });

const updateTimer = () => {
    const x = setInterval(() => {
      let {eventDate} = time;


      if (eventDate <= 0) {
        clearInterval(x);

      } else {
        eventDate = eventDate.subtract(1, 's');
        const days = eventDate.days();
        const hours = eventDate.hours();
        const mins = eventDate.minutes();
        const secs = eventDate.seconds();

        setTime({
          days,
          hours,
          mins,
          secs,
          eventDate,
        });
      }
    }, 1000);
  };

更改暂停状态的简单按钮，有效

const handlePause = () => {
    {
      !pause ? setPause(true) : setPause(false);
    }
  };

但不会停止useEffect

  useEffect(() => {
    if (pause) {
      return;
    } else {
      updateTimer();
    }
  }, []);

可能一切都错了，但是我对此没有其他想法。建议？谢谢！

Answer 1

找到了！我加了

 const [intervalTime, setIntervalTime] = useState();

并且我将其设置在函数的末尾

const updateTimer = () => {
    const x = setInterval(() => {
      let {eventDate} = time;

      if (eventDate <= 0) {
        clearInterval(x);

      } else {
        eventDate = eventDate.subtract(1, 's');
        const days = eventDate.days();
        const hours = eventDate.hours();
        const mins = eventDate.minutes();
        const secs = eventDate.seconds();

        setTime({
          days,
          hours,
          mins,
          secs,
          eventDate,
        });
      }
    }, 1000);
    console.log('interval', x);

    setIntervalTime(x); // set state

    };

然后我在clearInterval中使用handlePause

  const handlePause = () => {
    {
      !pause ? setPause(true) : setPause(false);
    }
    clearInterval(intervalTime);
  };

仅添加暂停具有依赖项

  useEffect(() => {
    if (!pause) {
      return;
    } else if (pause) {
      updateTimer();
    }
  }, [pause]);