React ahooks——副作用类hooks之useDebounceFn

安心不心安2025-08-07 19:48

useDebounceFn 是ahooks 提供的用于函数防抖的Hook，它可以确保一个函数在连续触发时只执行最后一次。

一、基本用法

javascript 复制代码

import { useDebounceFn } from 'ahooks';
import { Button } from 'antd';

const Demo = () => {
  const { run } = useDebounceFn(
    () => {
      console.log('防抖函数执行', new Date().toISOString());
    },
    {
    wait: 500,
    leading: true,   // 第一次立即执行
    trailing: true,  // 最后一次也执行
    maxWait: 2000   // 最多2秒必须执行一次
  }
  );

  return (
    <Button onClick={run}>
      点击我（防抖500ms）
    </Button>
  );
};

二、参数说明

2.1 输入参数

第一个参数：需要防抖的函数
第二个参数：配置对象
- wait：防抖等待时间，单位毫秒（默认 1000ms）
- leading：是否在延迟开始前立即执行（默认 false）
- trailing：是否在延迟结束后执行（默认 true）
- maxWait：最大等待时间（保证函数至少在这个时间内执行一次）

2.2 返回值

run：触发执行的防抖函数
cancel：取消当前防抖
flush：立即执行当前等待的函数