React ahooks——副作用类hooks之useDebounceFn

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

一、基本用法

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：立即执行当前等待的函数