useThrottleFn

限制函数的执行。对于调整大小和滚动等事件的处理程序的执行速率限制特别有用。

¥Throttle execution of a function. Especially useful for rate limiting execution of handlers on events like resize and scroll.

Throttle 是一个抛出球的弹簧：球飞出去后需要一段时间才能收缩，所以除非准备好，否则它不能再扔球。

¥Throttle is a spring that throws balls: after a ball flies out it needs some time to shrink back, so it cannot throw any more balls unless it's ready.

示例

source

Delay is set to 1000ms for this demo.

Button clicked: 0

Event handler called: 0

用法

¥Usage

import { useThrottleFn } from '@vueuse/core'

const throttledFn = useThrottleFn(() => {
  // do something, it will be called at most 1 time per second
}, 1000)

window.addEventListener('resize', throttledFn)

推荐阅读

¥Recommended Reading

• 去抖与油门：最终视觉指南

  ¥Debounce vs Throttle: Definitive Visual Guide

类型声明

显示类型声明

/**
 * Throttle execution of a function. Especially useful for rate limiting
 * execution of handlers on events like resize and scroll.
 *
 * @param   fn             A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
 *                                    to `callback` when the throttled-function is executed.
 * @param   ms             A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
 *                                    (default value: 200)
 *
 * @param [trailing] if true, call fn again after the time is up (default value: false)
 *
 * @param [leading] if true, call fn on the leading edge of the ms timeout (default value: true)
 *
 * @param [rejectOnCancel] if true, reject the last call if it's been cancel (default value: false)
 *
 * @return  A new, throttled, function.
 */
export declare function useThrottleFn<T extends FunctionArgs>(
  fn: T,
  ms?: MaybeRefOrGetter<number>,
  trailing?: boolean,
  leading?: boolean,
  rejectOnCancel?: boolean,
): PromisifyFn<T>

源代码

源代码 • 示例 • 文档

变更日志

No recent changes