带有暂停功能的 React Native Countdown答案

【问题标题】：React Native Countdown with pause function带有暂停功能的 React Native Countdown
【发布时间】：2020-04-22 09:00:50
【问题描述】：

从一个教程开始，我正在尝试制作自己的倒数计时器，并且我想添加一个暂停功能。它使用 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(() => {
    if (pause) {
      return;
    } else {
      updateTimer();
    }
  }, []);

可能一切都错了，但我不知道该怎么做。建议？谢谢！

【问题讨论】：

标签： javascript react-native time

【解决方案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

    };

然后我在handlePause中使用clearInterval

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

刚刚添加的暂停有依赖关系

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

【讨论】：