Skip to content
On this page

throttledWatch

Category
Last Changed
3 months ago

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.

import { throttledWatch } from '@vueuse/core'

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

throttledWatch(
  source,
  () => { console.log('changed!') },
  { throttle: 500 }
)

It's essentially a shorthand for the following code:

import { watchWithFilter, throttleFilter } from '@vueuse/core'

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

watchWithFilter(
  source,
  () => { console.log('changed!') },
  {
    eventFilter: throttleFilter(500),
  }
)

Type Declarations

export interface ThrottledWatchOptions<Immediate>
  extends WatchOptions<Immediate> {
  throttle?: MaybeRef<number>
  trailing?: boolean
  leading?: boolean
}
export declare function throttledWatch<
  T extends Readonly<WatchSource<unknown>[]>,
  Immediate extends Readonly<boolean> = false
>(
  sources: T,
  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
  options?: ThrottledWatchOptions<Immediate>
): WatchStopHandle
export declare function throttledWatch<
  T,
  Immediate extends Readonly<boolean> = false
>(
  source: WatchSource<T>,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: ThrottledWatchOptions<Immediate>
): WatchStopHandle
export declare function throttledWatch<
  T extends object,
  Immediate extends Readonly<boolean> = false
>(
  source: T,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: ThrottledWatchOptions<Immediate>
): WatchStopHandle
export interface ThrottledWatchOptions<Immediate>
  extends WatchOptions<Immediate> {
  throttle?: MaybeRef<number>
  trailing?: boolean
  leading?: boolean
}
export declare function throttledWatch<
  T extends Readonly<WatchSource<unknown>[]>,
  Immediate extends Readonly<boolean> = false
>(
  sources: T,
  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
  options?: ThrottledWatchOptions<Immediate>
): WatchStopHandle
export declare function throttledWatch<
  T,
  Immediate extends Readonly<boolean> = false
>(
  source: WatchSource<T>,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: ThrottledWatchOptions<Immediate>
): WatchStopHandle
export declare function throttledWatch<
  T extends object,
  Immediate extends Readonly<boolean> = false
>(
  source: T,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: ThrottledWatchOptions<Immediate>
): WatchStopHandle

Source

SourceDemoDocs

Contributors

Anthony Fu
wheat
Joakim Riedel
Roman Harmyder
Adrian Jost

Changelog

v6.6.0 on 10/16/2021
c13b1 - feat: add leading option (#843)
v6.4.0 on 9/17/2021
4a33e - feat(useThrottle): trailing option, useThrottledRefHistory updated (#760)
v4.6.4 on 4/4/2021
04dd5 - feat(filters): use number/ref with debounce & throttle filters (#410)
throttledWatch has loaded