react防抖hooks

useDebounce（防抖）方法：

参数：

1. func：回调函数
2. delay：回调函数执行的间隔时间s
3. immediate：是否首次立即执行

import {
    
     useRef } from 'react'
// 防抖
export default function useDebounce<T extends (...args: any[]) => void>(func: T, delay: number, immediate: boolean = false): (...args: Parameters<T>) => void {
    
    
  let timmer = useRef<NodeJS.Timeout>()
  let immediateVal = useRef(immediate)
  return function (...args:Parameters<T>) {
    
    
    if (immediateVal.current) {
    
    
      immediateVal.current = false
      func(args)
    } else {
    
    
      clearTimeout(timmer.current)
      timmer.current = setTimeout(() => {
    
    
        func(args)
      }, delay);
    }
  }
}

使用：

import useDebounce from '@/utils/Hook/useDebounce'
export default function(){
    
    
	const handle = () => {
    
    
		// do something ...
	}
	return (
		<div onClick={
    
    useDebounce(handle,1000,true)}></div>
	)
}