React+Typescript implementiert die Countdown-Hook-Methode

importiere { useEffect, useRef } von 'react'

/**
 * interTerval-Hook-Komponente * @param fn Ausführungsfunktion * @param Verzögerungszeit * @param Optionen unmittelbar Wenn wahr, führen Sie die fn-Funktion sofort aus und führen Sie dann den Timer aus * /
Funktion useInterval(
  fn: () => ungültig,
  Verzögerung: Zahl | null | undefiniert,
  Optionen?: {
    sofort?: Boolesch
  }
): Leere {
  const unmittelbar = Optionen?.unmittelbar
  const timerRef = useRef<() => void>()

  timerRef.current = fn

  useEffect(() => {
    if (Verzögerung === undefiniert || Verzögerung === null) {
      zurückkehren
    }
    wenn (sofort) {
      timerRef.aktuell?.()
    }
    const timer = setzeInterval(() => {
      timerRef.aktuell?.()
    }, Verzögerung)
    zurückgeben () => {
      Intervall löschen(Timer)
    }
  }, [Verzögerung])
}

Standard-UseIntervall exportieren

importiere { useState, useEffect, useRef, useMemo } von 'react'
importiere { useInterval } von './'

Schnittstelle ITime {
  /** Aktuelle Uhrzeit */
  aktuelleZeit?: Zahl
  /** Endzeit */
  Endzeit?: Zahl
  /** Eine andere Möglichkeit: Anstatt die aktuelle Zeit und die Endzeit zu übergeben, übergeben Sie direkt die Zeitdifferenz*/
  differentTime?: Zahl
}

Schnittstelle ICbTime {
  d: Zahl
  h: Zahl
  m: Zahl
  s: Zahl
}

/**
 * Countdown-Hooks
 * @param Optionen Zeitobjekt* @param cb Rückruffunktion, die ausgeführt wird, wenn der Countdown abgeschlossen ist* @param noImmediate, ob der Rückruf sofort ausgeführt werden soll, wenn die übergebene Zeit die Bedingungen für die Rückrufausführung erfüllt, der Standardwert ist „false“*/
Funktion useCountDown(
  Optionen: ITime,
  cb?: () => ungültig,
  noImmediate?: Boolescher Wert
): ICbTime {
  const { aktuelleZeit = 0, endZeit = 0, differentZeit = 0 } = Optionen
  const [diffTime, setzeDiffTime] = useState(0)
  /** Der Zeitpunkt, zu dem die Komponente den Parameter empfängt*/
  const entryTime = useRef<Zahl>(0)
  /** Die für den aktuellen Countdown erforderliche Zeitdifferenz*/
  const maxTime = useRef<Zahl>(0)
  /** Ist es möglich, einen Rückruf auszuführen? */
  const isImplementCb = useRef(false)

  useEffect(() => {
    wenn (!isImplementCb.current) {
      isImplementCb.current = true
    }
    wenn ((aktuelleZeit > 0 && Endzeit > 0) || abweichendeZeit > 0) {
      entryTime.current = neues Date().getTime()
      maxTime.current = Zeitunterschied > 0 ? Zeitunterschied : Endzeit - aktuelle Zeit
      wenn (maxTime.current <= 0 && noImmediate) {
        isImplementCb.current = false
      }
      setDiffTime(max.Zeit.aktuell)
    }
  }, [aktuelleZeit, Endzeit, abweichendeZeit])

  Intervall verwenden(
    () => {
      const curtTimes = neues Date().getTime()
      const TimeDifference = curtTimes - Eintragszeit.aktuell
      setDiffTime(maxTime.current - Zeitdifferenz)
    },
    diffTime <= 0 ? null : 1000
  )

  const ZeitObj = useMemo(() => {
    Konstante Zeit = Differenzzeit > 0? Differenzzeit / 1000 : 0
    const d = Math.floor(Zeit / (24 * 60 * 60))
    const h = Math.floor((Zeit / (60 * 60)) % 24)
    const m = Math.floor((Zeit / 60) % 60)
    const s = Math.ceil(Zeit % 60)

    wenn (diffTime <= 0 und isImplementCb.current) {
      /**
       * setTimeout wird verwendet, um das React-Fehlerproblem zu lösen:
       * Anmerkung wird während eines bestehenden Statusübergangs nicht aktualisiert (wie beispielsweise innerhalb von „Render“).
       * Rendermethoden sollten eine reine Funktion von Requisiten und Status sein.
       */
      setzeTimeout(() => {
        cb?.()
      }, 0)
    }
    Rückgabewert { d, h, m, s }
  }, [DiffZeit])

  gibt timeObj zurück || ({} als ICbTime)
}

Exportieren Sie standardmäßig useCountDown

  const TimeArea = () => {
    const { d, h, m, s } = useCountDown(
      {
        aktuelleZeit: 1631262176333,
        Endzeit: 1831062176333
      },
      () => {
        Alarm('Countdown endet')
      }
    )
    zurückkehren (
      <div Stil={{ Breite: '200px', Höhe: '200px' }}>
        {d} Tage bis zum Aufgabenende<i>{h < 10 ? '0' + h : h}</i>:
        <i>{m < 10 ? '0' + m : m}</i>:<i>{s < 10 ? '0' + s : s}</i>
      </div>
    )
  }