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.

示例

源代码演练场

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)

useEventListener(window, 'resize', throttledFn)

推荐阅读

¥Recommended Reading

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

  ¥Debounce vs Throttle: Definitive Visual Guide