useDebounce(防抖)方法:
参数:
- func:回调函数
- delay:回调函数执行的间隔时间s
- 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>
)
}