跳到主要内容

useDebounceFn

使用React hooks防抖(debounce)函数

Usage

实时编辑器

function Demo() {
  const [value, setValue] = useState(0);
  const { run } = useDebounceFn(() => {
    setValue(value + 1);
  }, 500);

  return (
    <div>
      <p style={{ marginTop: 16 }}> Clicked count: {value} </p>
      <button type="button" onClick={run}>
        Click fast!
      </button>
    </div>
  );
};

结果
Loading...

API

useDebounceFn

Returns

{ run: _.DebouncedFunc<(...args_0: Parameters<T>) => ReturnType<T>>; cancel: () => void; flush: any; }: 具有以下元素的对象:

  • run:执行函数。
  • cancel:取消执行函数。
  • flush: 立即执行函数

Arguments

参数名描述类型默认值
fn要防抖的函数T (必填)-
wait间隔时间number | undefined-
options传递给 lodash.debounce 的属性_.DebounceSettings | undefined-