React hooks 防抖节流的写法

背景
用户再使用软件的时候，可能会因为网络和硬件的问题，会可能会导致我们点击的时候没有反应，使客户端多次向服务器发送请求， 或者有些人不怀好意的恶意攻击，来增加服务器的压力，这个时候我们可以用防抖和节流来做，从而来达到目的

废话少说上代码
我们可以在utils中写一个帮助方法，这样可以多次使用

    // 防抖
export function useDebounce(fn, delay, dep = []) {
  const { current } = useRef({ fn, timer: null });
  useEffect(function () {
    current.fn = fn;
  }, [fn]);
  return useCallback(function f(...args) {
    if (current.timer) {
      clearTimeout(current.timer);
    }
    current.timer = setTimeout(() => {
      current.fn.call(this, ...args);
    }, delay);
  }, dep)
}

// 节流
export function useThrottle(fn, delay, dep = []) {
  const { current } = useRef({ fn, timer: null })
  useEffect(
    function () {
      current.fn = fn
    },
    [fn]
  )
  return useCallback(function f(...args) {
    if (!current.timer) {
      current.timer = setTimeout(() => {
        delete current.timer
      }, delay)
      current.fn.call(this, ...args)
    }
  }, dep)
}

使用方法

import { useThrottle,useDebounce } from "../../utils/helper";
const handlerSearch = useThrottle(() => {console.log('小太阳')},1000)
const handlerSearch = useDebounce(() => {console.log('小太阳')},1000)