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 (
 run('常规调用')}>触发节流函数
取消待执行
立即执行待调用
);
};

二、参数说明

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)

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

• 不会重置节流计时器