zoukankan      html  css  js  c++  java
  • react实现自定义hooks(倒计时)

    实现思路

    setTimeout + 递归,然后就是一个时间的转化。
    特别要注意在特定的地方清除定时器

    在线预览

    react倒计时hooks

    核心代码

    import { useRef, useState, useEffect } from "react";
    
    const formatMoment = (ms, type = "DD HH:mm:ss") => {
      if (ms <= 0)
        return {
          day: 0,
          hour: 0,
          minute: 0,
          second: 0
        };
      let remainTs = ms;
      let day = 0;
      if (type.indexOf("DD") !== -1) {
        day = Math.floor(ms / 1000 / 3600 / 24);
        remainTs = ms % (24 * 60 * 60 * 1000);
      }
      const hour = Math.floor(remainTs / 60 / 60 / 1000);
      remainTs %= 60 * 60 * 1000;
      const minute = Math.floor(remainTs / 60 / 1000);
      remainTs %= 60 * 1000;
      const second = Math.floor(remainTs / 1000);
    
      return {
        day,
        hour,
        minute,
        second
      };
    };
    /**
     * timeRemaining:剩余时间的时间戳
     * onComplete:倒计时结束的回调
     */
    export default function useCountdown(timeRemaining, onComplete) {
      const cancelToken = useRef(false);
      const timer = useRef();
      const [countDownTime, setCountDownTime] = useState(0);
      useEffect(
        () => () => {
          cancelToken.current = true;
        },
        []
      );
    
      useEffect(() => {
        count(timeRemaining);
    
        return () => {
          window.clearTimeout(timer.current);
        };
      }, [timeRemaining]);
    
      const count = (remainTs) => {
        if (timer.current) window.clearTimeout(timer.current);
        if (cancelToken.current) return;
        if (remainTs <= 0 && Number(timeRemaining) > 0) {
          window.clearTimeout(timer.current);
          onComplete();
        } else {
          setCountDownTime(remainTs - 1000);
          timer.current = window.setTimeout(() => count(remainTs - 1000), 1000);
        }
      };
      const { day, hour, minute, second } = formatMoment(countDownTime);
      return { day, hour, minute, second };
    }
    
    
  • 相关阅读:
    加入创业公司有什么利弊
    Find Minimum in Rotated Sorted Array II
    Search in Rotated Sorted Array II
    Search in Rotated Sorted Array
    Find Minimum in Rotated Sorted Array
    Remove Duplicates from Sorted Array
    Spiral Matrix
    Spiral Matrix II
    Symmetric Tree
    Rotate Image
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/15787390.html
Copyright © 2011-2022 走看看