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)

推薦閱讀

• Debounce vs Throttle：決定性的視覺指南
• 透過範例解釋 Debouncing 和 Throttling

類型宣告

/**
 * 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 }

原始碼

Source • Demo • Docs

貢獻者

Anthony Fu

Anthony Fu

IlyaL

Danny Feliz

更新日誌

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

0a9ed - feat!: 移除 Vue 2 支援，最佳化 bundles 並清理 (#4349)