纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

React+Typescript实现倒计时 React+Typescript实现倒计时Hook的方法

燎原火_   2021-09-14 我要评论
想了解React+Typescript实现倒计时Hook的方法的相关内容吗燎原火_在本文为您仔细讲解React+Typescript实现倒计时 的相关知识和一些Code实例欢迎阅读和指正我们先划重点:React,Typescript实现倒计时,React,倒计时Hook,React,倒计时下面大家一起来学习吧

首先对setInterval做了Hook化封装👇

import { useEffect, useRef } from 'react'

/**
 * interTerval hooks组件
 * @param fn 执行函数
 * @param delay 时间
 * @param options immediate为true时先立即执行一次fn函数后再执行定时器
 */
function useInterval(
  fn: () => void,
  delay: number | null | undefined,
  options?: {
    immediate?: boolean
  }
): void {
  const immediate = options?.immediate
  const timerRef = useRef<() => void>()

  timerRef.current = fn

  useEffect(() => {
    if (delay === undefined || delay === null) {
      return
    }
    if (immediate) {
      timerRef.current?.()
    }
    const timer = setInterval(() => {
      timerRef.current?.()
    }, delay)
    return () => {
      clearInterval(timer)
    }
  }, [delay])
}

export default useInterval

实现倒计时Hook

import { useState, useEffect, useRef, useMemo } from 'react'
import { useInterval } from './'

interface ITime {
  /** 当前时间 */
  currentTime?: number
  /** 结束时间 */
  endTime?: number
  /** 另一种方式不传当前时间和结束时间直接传时间差 */
  differTime?: number
}

interface ICbTime {
  d: number
  h: number
  m: number
  s: number
}

/**
 * 倒计时hooks
 * @param options 时间对象
 * @param cb 倒计时完成时执行的回调函数
 * @param noImmediate 时间传进来满足执行回调条件时是否立即执行回调默认false执行
 */
function useCountDown(
  options: ITime,
  cb?: () => void,
  noImmediate?: boolean
): ICbTime {
  const { currentTime = 0, endTime = 0, differTime = 0 } = options
  const [diffTime, setDiffTime] = useState(0)
  /** 组件接收到参数时的时间 */
  const entryTime = useRef<number>(0)
  /** 当前倒计时要求的时间差 */
  const maxTime = useRef<number>(0)
  /** 是否可以执行回调 */
  const isImplementCb = useRef(false)

  useEffect(() => {
    if (!isImplementCb.current) {
      isImplementCb.current = true
    }
    if ((currentTime > 0 && endTime > 0) || differTime > 0) {
      entryTime.current = new Date().getTime()
      maxTime.current = differTime > 0 ? differTime : endTime - currentTime
      if (maxTime.current <= 0 && noImmediate) {
        isImplementCb.current = false
      }
      setDiffTime(maxTime.current)
    }
  }, [currentTime, endTime, differTime])

  useInterval(
    () => {
      const curtTimes = new Date().getTime()
      const TimeDifference = curtTimes - entryTime.current
      setDiffTime(maxTime.current - TimeDifference)
    },
    diffTime <= 0 ? null : 1000
  )

  const timeObj = useMemo(() => {
    const time = diffTime > 0 ? diffTime / 1000 : 0
    const d = Math.floor(time / (24 * 60 * 60))
    const h = Math.floor((time / (60 * 60)) % 24)
    const m = Math.floor((time / 60) % 60)
    const s = Math.ceil(time % 60)

    if (diffTime <= 0 && isImplementCb.current) {
      /**
       * setTimeout用于解决react报错问题:
       * annot update during an existing state transition (such as within `render`).
       * Render methods should be a pure function of props and state.
       */
      setTimeout(() => {
        cb?.()
      }, 0)
    }
    return { d, h, m, s }
  }, [diffTime])

  return timeObj || ({} as ICbTime)
}

export default useCountDown

写个demo看一下效果👇

  const TimeArea = () => {
    const { d, h, m, s } = useCountDown(
      {
        currentTime: 1631262176333,
        endTime: 1831062176333
      },
      () => {
        alert('倒计时结束')
      }
    )
    return (
      <div style={{ width: '200px', height: '200px' }}>
        距离任务结束 {d}天<i>{h < 10 ? '0' + h : h}</i>:
        <i>{m < 10 ? '0' + m : m}</i>:<i>{s < 10 ? '0' + s : s}</i>
      </div>
    )
  }

相关文章

猜您喜欢

  • vue.js 动态组件 vue.js 动态组件详解

    想了解vue.js 动态组件详解的相关内容吗猫老板的豆在本文为您仔细讲解vue.js 动态组件的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue.js,动态组件,vue.js,动态组件详解下面大家一起来学习吧..
  • Ray集群创建Python分布式 使用Ray集群简单创建Python分布式应用程序

    想了解使用Ray集群简单创建Python分布式应用程序的相关内容吗somenzz在本文为您仔细讲解Ray集群创建Python分布式的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Ray集群创建Python分布式,Ray集群使用,Python分布式下面大家一起来学习吧..

网友评论

Copyright 2020 www.sopisoft.net 【绿软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式