useThrottleFn
节流执行函数。特别适用于限制事件处理程序在调整大小和滚动等事件上的执行频率。
节流就像一个弹簧,弹出一个小球后,它需要一些时间来收缩回去,所以除非准备好,否则不能再扔出更多的小球。
示例
此演示中延迟设置为 1000ms。
按钮点击次数:0
事件处理程序调用次数:0
使用方法
js
import { useThrottleFn } from '@vueuse/core'
const throttledFn = useThrottleFn(() => {
// 做一些事情,它每秒最多被调用一次
}, 1000)
useEventListener(window, 'resize', throttledFn)
推荐阅读
类型声明
typescript
/**
* 节流执行函数。特别适用于限制事件处理程序在调整大小和滚动等事件上的执行频率。
*
* @param fn 在延迟毫秒后执行的函数。在执行节流函数时,`this` 上下文和所有参数都原样传递到回调函数中。
* @param ms 毫秒为单位的延迟时间,必须为零或更大。对于事件回调,最有用的值大约为 100 或 250(甚至更高)。
*
* @param [trailing] 如果为 true,在时间结束后再次调用 fn
*
* @param [leading] 如果为 true,在 ms 超时的起始边缘调用 fn
*
* @param [rejectOnCancel] 如果为 true,如果上次调用已被取消,则拒绝最后一次调用
*
* @return 一个新的节流函数。
*/
export declare function useThrottleFn<T extends FunctionArgs>(
fn: T,
ms?: MaybeRefOrGetter<number>,
trailing?: boolean,
leading?: boolean,
rejectOnCancel?: boolean,
): PromisifyFn<T>
源码
贡献者
Anthony Fu
一纸忘忧
Fernando Fernández
OrbisK
Anthony Fu
Ctibor Laky
丶远方
vaakian X
azaleta
webfansplz
Jakub Freisler
Roman Harmyder
wheat
更新日志
v10.0.0-beta.4
on 4/13/20234d757
- feat(types)!: rename MaybeComputedRef
to MaybeRefOrGetter
v9.10.0
on 1/3/2023