useDebouncedFn

生成防抖函数的 Hook

代码演示

基本用法

Count: 0

Live Editor

Copy

function Example() { const [count, setCount] = useState(0) const debouncedFn = useDebouncedFn(() => { setCount(count + 1) }, 500) return ( <div> <div>Count: { count }</div> <Button onClick={debouncedFn} style={{ marginTop: 20 }} > Click fast! </Button> </div> ) }

function Example() {
  const [count, setCount] = useState(0)
  const debouncedFn = useDebouncedFn(() => {
    setCount(count + 1)
  }, 500)
  return (
    <div>
      <div>Count: { count }</div>
      <Button
        onClick={debouncedFn}
        style={{ marginTop: 20 }}
      >
        Click fast!
      </Button>
    </div>
  )
}

API

type Noop = (...args: any[]) => any
interface Cancelable {
  cancel(): void
  flush(): void
}
type UseDebouncedFn = <T extends Noop>(fn: T, wait: number, optionsOrDeps?: Options | any[], deps?: any[]) => T & Cancelable

Options

参数	说明	必选	类型	默认值
leading	指定在延迟开始前调用	-	boolean	false
trailing	指定在延迟结束后调用	-	boolean	true
maxWait	设置防抖允许被延迟的最大值	-	number	-