• 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 };
    }
    
    
  • 相关阅读:
    爬虫学习(五)——百度贴吧的爬取
    爬虫学习(四)——post请求爬取
    爬虫学习(三)——get请求参数解析
    爬虫学习(二)
    爬虫学习(一)
    第二阶段团队冲刺第三天
    第二阶段团队冲刺第二天
    第二阶段团队冲刺第一天
    第一阶段绩效评估
    Alpha版(内部测试版)发布
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/15787390.html
Copyright © 2020-2023  润新知