react的hooks防抖和节流的具体实现

const fn = () => {
  console.log(count)
}

function useDebounceFn(fn, delay = 300) {
  const timer = useRef<number | null>(null)
  const fnRef = useRef(fn)
  // 始终指向最新 fn，解决闭包问题
  fnRef.current = fn
  const debounce = useCallback((...args) => {
    if (timer.current) {
      clearTimeout(timer.current)
    }
    timer.current = window.setTimeout(() => {
      fnRef.current(...args)
    }, delay)
  }, [delay])
  return debounce
}

const onSearch = useDebounceFn(value => {
  fetchList(value)
}, 500)
<input onChange={e => onSearch(e.target.value)} />

function useThrottleFn(fn, delay = 300) {
  const lastTime = useRef(0)
  const fnRef = useRef(fn)
  fnRef.current = fn
  return useCallback((...args) => {
    const now = Date.now()
    if (now - lastTime.current >= delay) {
      lastTime.current = now
      fnRef.current(...args)
    }
  }, [delay])
}

function useThrottleFn(fn, delay = 300) {
  const timer = useRef<number | null>(null)
  const fnRef = useRef(fn)
  fnRef.current = fn
  return useCallback((...args) => {
    if (timer.current) return
    timer.current = window.setTimeout(() => {
      fnRef.current(...args)
      timer.current = null
    }, delay)
  }, [delay])
}

const debouncedFn = useMemo(
  () => debounce(fn, 300),
  []
)

const fnRef = useRef(fn)
fnRef.current = fn
const debounced = useMemo(
  () => debounce((...args) => fnRef.current(...args), 300),
  []
)

const fn = debounce(() => {
  setCount(count + 1)
}, 300)