React ahooks——副作用类hooks之useThrottleFn

**useThrottleFn**用于创建一个节流函数,确保该函数在指定时间内最多执行一次。

一、基本使用

javascript 复制代码
import { useThrottleFn } from 'ahooks';
import { Button, Space } from 'antd';

const ThrottleDemo = () => {
  const { run, cancel, flush } = useThrottleFn(
    (message) => {
      console.log(message, new Date().toISOString());
    },
    { 
      wait: 2000,
      leading: true,
      trailing: true 
    }
  );

  return (
    <Space>
      <Button onClick={() => run('常规调用')}>触发节流函数</Button>
      <Button onClick={cancel}>取消待执行</Button>
      <Button onClick={flush}>立即执行待调用</Button>
    </Space>
  );
};

二、参数说明

2.1 配置项

**useThrottleFn**的第二个参数是一个配置对象,可以设置以下选项:

主要配置项

  • wait (number)

    • 节流等待时间,单位毫秒

    • 默认值:1000 (1秒)

    • 示例:{ wait: 500 } 表示500毫秒内最多执行一次

  • leading (boolean)

    • 是否在节流开始前立即执行函数

    • 默认值:true

    • 如果设为 false,第一次调用不会立即执行

  • trailing (boolean)

    • 是否在节流结束后执行函数

    • 默认值:true

    • 如果设为 false,最后一次调用不会在延迟结束后执行

高级配置项

  • maxWait (number)

    • 最大等待时间,保证在超过此时间后一定会执行一次

    • 示例:{ wait: 500, maxWait: 2000 } 表示即使持续触发,至少每2秒会执行一次

2.2 返回值

run (Function)

  • 触发执行节流函数的入口

  • 调用时会根据配置的节流规则决定是否执行原函数

  • 可以传递参数给原函数

cancel (Function)

  • 取消所有待执行的节流函数调用

  • 清空节流计时器

flush (Function)

  • 立即执行当前待执行的节流函数(如果有)

  • 不会重置节流计时器

相关推荐
白龙马云行技术团队2 分钟前
性能治理之页面LongTask优化
前端
Nayana2 分钟前
Clean Code JavaScript小记(二)
javascript
Ankkaya3 分钟前
开发小结(08.11-08.16)
前端·uni-app
Hilaku3 分钟前
前端监控实战:从性能指标到用户行为,我是如何搭建监控体系的
前端·javascript·性能优化
咖啡の猫4 分钟前
Shell脚本-影响shell程序的内置命令
前端·chrome·bash
sorryhc17 分钟前
【AI解读源码系列】ant design mobile——Avatar头像
前端·javascript·react.js
Mintopia25 分钟前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc
Mintopia25 分钟前
🎬《Next 全栈 CRUD 的百老汇》
前端·后端·next.js
AryaNimbus41 分钟前
你不知道的Cursor系列:如何使用Cursor同时开发多项目?
前端·ai编程·cursor
国家不保护废物1 小时前
Function Call与MCP:给AI插上连接现实的翅膀
前端·aigc·openai