VueUserefThrottled
Category
Export Size
454 B
Last Changed
last year
Alias
useThrottlethrottledRef Related
Throttle changing of a ref value.
Demo
Delay is set to 1000ms for this demo.
Throttled:
Times Updated: 0
Trailing: true
Leading: false
Usage
js
import { refThrottled } from '@vueuse/core'
const input = ref('')
const throttled = refThrottled(input, 1000)
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):
js
import { refThrottled } from '@vueuse/core'
const input = ref('')
const throttled = refThrottled(input, 1000, false)
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):
js
import { refThrottled } from '@vueuse/core'
const input = ref('')
const throttled = refThrottled(input, 1000, undefined, false)
import { refThrottled } from '@vueuse/core'
const input = ref('')
const throttled = refThrottled(input, 1000, undefined, false)
Recommended Reading
Type Declarations
typescript
/**
* 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=true] if true, update the value again after the delay time is up
* @param [leading=true] 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>
export { refThrottled as useThrottle, refThrottled as throttledRef }
/**
* 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=true] if true, update the value again after the delay time is up
* @param [leading=true] 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>
export { refThrottled as useThrottle, refThrottled as throttledRef }
Source
Contributors
Anthony Fu
Danny Feliz