refThrottled

Category

Reactivity

Export Size

458 B

Last Changed

2 days ago

Alias

useThrottlethrottledRef

Related

useThrottleFn

Throttle changing of a ref value.

Demo

source

Delay is set to 1000ms for this demo.

Throttled:

Times Updated: 0

Trailing: true

Leading: false

Usage

import { refThrottled } from '@vueuse/core'

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

Trailing

If you don't want to watch trailing changes, set 3rd param false (it's true by default):

import { refThrottled } from '@vueuse/core'

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

Leading

Allows the callback to be invoked immediately (on the leading edge of the ms timeout). If you don't want this behavior, set the 4th param false (it's true by default):

import { refThrottled } from '@vueuse/core'

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

Recommended Reading

• Debounce vs Throttle: Definitive Visual Guide
• Debouncing and Throttling Explained Through Examples

Type Declarations

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

Source • Demo • Docs

Contributors

Anthony Fu

Anthony Fu

Danny Feliz

Changelog

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

0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)