Skip to content

useThrottleFn

Category
Export Size
401 B
Last Changed
5 months ago
Related

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

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

Demo

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

按钮点击次数:0

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

使用方法

js
import { useThrottleFn } from '@vueuse/core'

const throttledFn = useThrottleFn(() => {
  // 做一些事情,它每秒最多被调用一次
}, 1000)

window.addEventListener('resize', throttledFn)

推荐阅读

类型声明

typescript
/**
 * 节流函数的执行。特别适用于对 resize 和 scroll 等事件的处理程序进行速率限制。
 *
 * @param   fn             一个将在延迟毫秒数后执行的函数。`this` 上下文和所有参数将按原样传递给节流函数执行时的 `callback`。
 * @param   ms             一个大于或等于零的延迟时间(以毫秒为单位)。对于事件回调,100 或 250(甚至更高)的值最有用。
 *                                    (默认值:200)
 *
 * @param [trailing] 如果为 true,时间结束后再次调用 fn(默认值:false)
 *
 * @param [leading] 如果为 true,在 ms 超时的前沿调用 fn(默认值:true)
 *
 * @param [rejectOnCancel] 如果为 true,取消最后一次调用时拒绝(默认值:false)
 *
 * @return  一个新的节流函数。
 */
export declare function useThrottleFn<T extends FunctionArgs>(
  fn: T,
  ms?: MaybeRefOrGetter<number>,
  trailing?: boolean,
  leading?: boolean,
  rejectOnCancel?: boolean,
): PromisifyFn<T>

Source

SourceDemoDocs

贡献者

Anthony Fu
丶远方
Anthony Fu
Ctibor Laky
vaakian X
azaleta
webfansplz
Jakub Freisler
Roman Harmyder
wheat

变更日志

v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v9.10.0 on 1/3/2023
4d305 - feat(useDebounceFn,useThrottleFn): return result using promise (#2580)

Released under the MIT License.