**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)
-
立即执行当前待执行的节流函数(如果有)
-
不会重置节流计时器