Реагировать на собственный обратный отсчет с функцией паузы

Question

Начиная с урока, я пытаюсь создать свой собственный таймер обратного отсчета и хочу добавить функцию паузы. Используется момент. 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]);