refThrottled

类别

Reactivity

导出体积

534 B

上次更改

6 minutes ago

别名

useThrottlethrottledRef

示例

源码 playground (beta)

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

节流后的值:

更新次数: 0

尾部触发: true

头部触发: false

用法

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

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

一个带有对象引用的示例。

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

const data = shallowRef({
  count: 0,
  name: 'foo',
})
const throttled = refThrottled(data, 1000)

data.value = { count: 1, name: 'foo' }
console.log(throttled.value) // { count: 1, name: 'foo' } (immediate)

data.value = { count: 2, name: 'bar' }
data.value = { count: 3, name: 'baz' }
data.value = { count: 4, name: 'qux' }
console.log(throttled.value) // { count: 1, name: 'foo' } (still first value)

// After 1000ms, next change will be applied
await sleep(1100)
data.value = { count: 5, name: 'final' }
await nextTick()
console.log(throttled.value) // { count: 5, name: 'final' } (updated)

尾部触发

如果你不想监听尾部的变化，可以设置第三个参数为 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)

类型声明

export type RefThrottledReturn
<T
 = any> = Ref
<T
>
/**
 * 函数节流，特别适用于限制像 resize 和 scroll 这样的事件处理程序的执行频率。
 *
 * @param value 要使用节流效果监视的 Ref 值
 * @param delay 以毫秒为单位的延迟时间，必须是大于或等于零的值。对于事件回调，最有用的值通常在 100 或 250（甚至更高）左右。
 * @param trailing 如果为 true，在延迟时间结束后再次更新值
 * @param leading 如果为 true，在 ms 超时的头部立即更新值
 */
export declare function refThrottled
<T
 = any>(
  value
: Ref
<T
>,
  delay
?: number,
  trailing
?: boolean,
  leading
?: boolean,
): RefThrottledReturn
<T
>
/** @deprecated use `refThrottled` instead */
export declare const throttledRef
: typeof refThrottled

/** @deprecated use `refThrottled` instead */
export declare const useThrottle
: typeof refThrottled