useTimeout

作用

一个可以处理 setTimeout 计时器函数的 Hook

原理

通过useRef缓存定时器的引用，然后通过useEffect监听delay的变化，当delay变化时，清除之前的定时器，然后重新设置定时器

源码

import { useCallback, useEffect, useRef } from 'react'
import useMemoizedFn from '../useMemoizedFn'
import { isNumber } from '../utils'

const useTimeout = (fn: () => void, delay?: number) => {
  // 持久化需要执行的函数
  const timerCallback = useMemoizedFn(fn)
  // 缓存定时器的引用
  const timerRef = useRef<NodeJS.Timer | null>(null)

  // 清除定时器的函数
  const clear = useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current)
    }
  }, [])

  useEffect(() => {
    if (!isNumber(delay) || delay < 0) {
      return
    }
    timerRef.current = setTimeout(timerCallback, delay)
    // 组件卸载时清除定时器
    return clear
  }, [delay])

  // 返回清除定时器的函数
  return clear
}

export default useTimeout

useTimeout ​

原理 ​

源码 ​

useTimeout

原理

源码