基于hook实现防抖

1. 什么是防抖（debounce）

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

2 应用场景

(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；

(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

3 实现

import { useRef, useEffect, useCallback } from 'react'
export default function useDebounce(callback, delay = 250) {
  const ref = useRef({ callback, timer: null })
 
  useEffect(() => {
    ref.current.callback = callback
  }, [callback])
 
  return useCallback(
    function debounce(...args) {
      if (ref.current.timer) clearTimeout(ref.current.timer)
      ref.current.timer = setTimeout(() => {
        ref.current.callback(this, args)
        ref.current.timer = null
      }, delay)
    },
    [delay],
  )
}