React ahooks——副作用类hooks之useThrottleFn

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

一、基本使用

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)

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

• 不会重置节流计时器