时间戳

首页 > 解决方案 > React Native - 如何延迟启动

react-native - React Native - 如何延迟启动

问题描述

大家好，我正在尝试制作一个具有很多自定义功能的倒数计时器，但我的第一个问题是如何延迟它的开始。

它从 0 秒开始，需要一点时间来获取我从上一页传递的值

const CountDownScreen = ({route, navigation}) => {

  const meditationTime = route.params.time;

我抓紧时间

  const getMedTime = () => {
    let res = meditationTime;
    return new Promise(resolve => resolve(res));
  };

说明我会得到的时间

const [timeToGive, setTimeToGive] = useState();


  useEffect(() => {
    const setTimeState = async () => {
      const getTime = await getMedTime();
      console.log('get time', getTime);
      // setGotTime(getTime);

      let timeToGive = {
        minutes: 0,
        seconds: getTime,
      };

      setTimeToGive(timeToGive);
    };
    setTimeState();

    updateTimer();
  }, []);

与时俱进

  const [time, setTime] = useState(
    {
      eventDate: moment.duration().add(timeToGive),
    },
  );

计时器开始（我想在承诺之后）

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

      if (eventDate <= 0) {
        clearInterval(x);
        sessionEnded();
      } else {

        eventDate = eventDate.subtract(1, 's');

        const mins = eventDate.minutes();
        const secs = eventDate.seconds();

        setTime({
          mins,
          secs,
          eventDate,
        });
      }
    }, 1000);
    setIntervalTime(x);
  };

我尝试了很多不同的解决方案，但都没有奏效。它总是开始晚我想避免asetTimeout有没有更好的功能？谢谢 ！

标签： react-native

解决方案

那是因为您使用的是 setInterval，它仅在 1 秒后开始（在您的情况下）。

您可能应该重新调整您的代码并执行类似的操作：

  x(); // Call x once

  setInterval(() => {
   x(); 
  }, 1000); // Call x after every seconds

您可以将 intervalId 存储到一个状态中，这样您就可以清除它。

推荐阅读