防抖hooks

53 阅读1分钟

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>
	)
}