React ahooks——副作用类hooks之useThrottleFn

安心不心安2025-08-04 21:10

**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)

立即执行当前待执行的节流函数（如果有）
不会重置节流计时器