React ahooks——副作用类hooks之useDebounceFn

useDebounceFnahooks 提供的用于函数防抖的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:立即执行当前等待的函数

相关推荐
2501_938774296 分钟前
Leaflet 弹出窗实现:Spring Boot 传递省级旅游口号信息的前端展示逻辑
前端·spring boot·旅游
meichaoWen22 分钟前
【CSS】CSS 面试知多少
前端·css
我血条子呢28 分钟前
【预览PDF】前端预览pdf
前端·pdf·状态模式
90后的晨仔42 分钟前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端
90后的晨仔1 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
专注前端30年1 小时前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
90后的晨仔1 小时前
TypeScript是什么?为什么前端必须学它?
前端
用户47949283569152 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在2 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好12 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js