Skip to content

watchThrottled

Category
Export Size
531 B
Last Changed
last week
Alias
throttledWatch

Throttled watch.

Demo

Delay is set to 1000ms for this demo.

Input:

Times Updated: 0

Usage

Similar to watch, but offering an extra option throttle which will be applied to the callback function.

ts
import { 
watchThrottled
} from '@vueuse/core'
watchThrottled
(
source, () => {
console
.
log
('changed!') },
{
throttle
: 500 },
)

It's essentially a shorthand for the following code:

ts
import { 
throttleFilter
,
watchWithFilter
} from '@vueuse/core'
watchWithFilter
(
source, () => {
console
.
log
('changed!') },
{
eventFilter
:
throttleFilter
(500),
}, )

Type Declarations

Show Type Declarations
ts
export interface 
WatchThrottledOptions
<
Immediate
>
extends WatchOptions<
Immediate
> {
throttle
?:
MaybeRefOrGetter
<number>
trailing
?: boolean
leading
?: boolean
} export declare function
watchThrottled
<
T
extends
Readonly
<
WatchSource
<unknown>[]>,
Immediate
extends
Readonly
<boolean> = false,
>(
sources
: [...
T
],
cb
:
WatchCallback
<
MapSources
<
T
>,
MapOldSources
<
T
,
Immediate
>>,
options
?:
WatchThrottledOptions
<
Immediate
>,
):
WatchHandle
export declare function
watchThrottled
<
T
,
Immediate
extends
Readonly
<boolean> = false,
>(
source
:
WatchSource
<
T
>,
cb
:
WatchCallback
<
T
,
Immediate
extends true ?
T
| undefined :
T
>,
options
?:
WatchThrottledOptions
<
Immediate
>,
):
WatchHandle
export declare function
watchThrottled
<
T
extends object,
Immediate
extends
Readonly
<boolean> = false,
>(
source
:
T
,
cb
:
WatchCallback
<
T
,
Immediate
extends true ?
T
| undefined :
T
>,
options
?:
WatchThrottledOptions
<
Immediate
>,
):
WatchHandle
/** @deprecated use `watchThrottled` instead */ export declare const
throttledWatch
: typeof
watchThrottled

Source

SourceDemoDocs

Contributors

Anthony Fu
Anthony Fu
sun0day
Arthur Darkstone
Vida Xie
IlyaL
OrbisK
丶远方
lvjiaxuan
Joe Zimmerman
webfansplz

Changelog

v14.0.0-alpha.3 on
b8102 - feat(watch): update watch return typo in watchExtractedObservable, watchDebounced, watchDeep, watchImmediate, watchOnce, watchThrottled and watchWithFilter (#4896)
v14.0.0-alpha.2 on
e5f74 - feat!: deprecate alias exports in favor of original function names (#5009)
v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access