• 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 };
    }
    
    
  • 相关阅读:
    jQuery 如何存储,获取和删除 Cookies
    mysql调用存储过程出现Illegal mix of collations错误
    vim IDE
    android 播放Raw文件夹下的音乐文件
    7种形式的Android Dialog使用举例
    Chronometer 计时器使用
    获取屏幕,适应屏幕
    android 碎片
    安卓开发者必备的42个链接
    自定义TabActivity,TabActivity的美化
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/15787390.html
Copyright © 2020-2023  润新知