reactjs 我如何删除延迟倒计时计时器?

jjhzyzn0  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(185)

我做了一个倒计时器,但每次网站加载,计时器需要1.5秒从默认值0加载。有什么办法可以预先加载它或使它立即出现?

function Timer() {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  const deadline = "February, 17, 2023";

  const getTime = () => {
    const time = Date.parse(deadline) - Date.now();

    setDays(Math.floor(time / (1000 * 60 * 60 * 24)));
    setHours(Math.floor((time / (1000 * 60 * 60)) % 24));
    setMinutes(Math.floor((time / 1000 / 60) % 60));
    setSeconds(Math.floor((time / 1000) % 60));
  };

  useEffect(() => {
    const interval = setInterval(() => getTime(deadline), 1000);

    return () => clearInterval(interval);
  }, []);
k75qkfdt

k75qkfdt1#

这是因为第一次计算计时器是在初始的1s延迟之后,最简单的解决方法是在创建间隔之前调用getTime

useEffect(() => {
  // This will run after the component mounts
  getTime();

  // This will then run every second afterwards
  const interval = setInterval(() => getTime(), 1000);
  return () => clearInterval(interval);
}, []);

相关问题