Skip to content

useThrottleFn

类别
导出体积
471 B
上次更改
last month
相关

节流执行函数。特别适用于限制事件处理程序在调整大小和滚动等事件上的执行频率。

节流就像一个弹簧,弹出一个小球后,它需要一些时间来收缩回去,所以除非准备好,否则不能再扔出更多的小球。

示例

此演示中延迟设置为 1000ms。

按钮点击次数:0

事件处理程序调用次数:0

使用方法

ts
import { 
useThrottleFn
} from '@vueuse/core'
const
throttledFn
=
useThrottleFn
(() => {
// 做一些事情,它每秒最多被调用一次 }, 1000) useEventListener(
window
, 'resize',
throttledFn
)

推荐阅读

类型声明

ts
/**
 * 节流执行函数。特别适用于限制事件处理程序在调整大小和滚动等事件上的执行频率。
 *
 * @param   fn             在延迟毫秒后执行的函数。在执行节流函数时,`this` 上下文和所有参数都原样传递到回调函数中。
 * @param   ms             毫秒为单位的延迟时间,必须为零或更大。对于事件回调,最有用的值大约为 100 或 250(甚至更高)。
 *
 * @param [trailing] 如果为 true,在时间结束后再次调用 fn
 *
 * @param [leading] 如果为 true,在 ms 超时的起始边缘调用 fn
 *
 * @param [rejectOnCancel] 如果为 true,如果上次调用已被取消,则拒绝最后一次调用
 *
 * @return  一个新的节流函数。
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function 
useThrottleFn
<
T
extends
FunctionArgs
>(
fn
:
T
,
ms
?:
MaybeRefOrGetter
<number>,
trailing
?: boolean,
leading
?: boolean,
rejectOnCancel
?: boolean,
):
PromisifyFn
<
T
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
SerKo
Anthony Fu
IceMooncake
Thimo Sietsma
IlyaL
Fernando Fernández
OrbisK
Ctibor Laky
丶远方
vaakian X
azaleta
webfansplz
Jakub Freisler
Roman Harmyder
wheat

更新日志

d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)