refThrottled

类别

响应性

导出大小

556 B

最近更改

3 周前

别名

useThrottlethrottledRef

相关

useThrottleFn

节流 ref 值的更改。

演示

源代码

此演示的延迟设置为 1000 毫秒。

已节流

更新次数：0

尾随：true

前导：false

用法

import { refThrottled } from '@vueuse/core'
import { shallowRef } from 'vue'

const input = shallowRef('')
const throttled = refThrottled(input, 1000)

尾随

如果您不想监听尾随更改，请将第三个参数设置为 false（默认为 true）

import { refThrottled } from '@vueuse/core'
import { shallowRef } from 'vue'

const input = shallowRef('')
const throttled = refThrottled(input, 1000, false)

前导

允许立即调用回调（在 ms 超时的前导边缘）。如果您不想要此行为，请将第四个参数设置为 false（默认为 true）

import { refThrottled } from '@vueuse/core'
import { shallowRef } from 'vue'

const input = shallowRef('')
const throttled = refThrottled(input, 1000, undefined, false)

推荐阅读

• 防抖 vs 节流：权威可视化指南
• 通过示例解释防抖和节流

类型声明

/**
 * Throttle execution of a function. Especially useful for rate limiting
 * execution of handlers on events like resize and scroll.
 *
 * @param value Ref value to be watched with throttle effect
 * @param  delay  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
 * @param [trailing] if true, update the value again after the delay time is up
 * @param [leading] if true, update the value on the leading edge of the ms timeout
 */
export declare function refThrottled<T>(
  value: Ref<T>,
  delay?: number,
  trailing?: boolean,
  leading?: boolean,
): Ref<T, T>
export { refThrottled as throttledRef, refThrottled as useThrottle }

源代码

源代码 • 演示 • 文档

贡献者

Anthony Fu

Anthony Fu

IlyaL

Danny Feliz

更新日志

v12.0.0-beta.1 on 11/21/2024

0a9ed - feat!: 移除 Vue 2 支持，优化捆绑包并清理 (#4349)