fuel-price/.agents/skills/vueuse-functions/references/watchThrottled.md

category, alias

category	alias
Watch	throttledWatch

watchThrottled

Throttled watch. The callback will be invoked at most once per specified duration.

Usage

Similar to watch, but offering extra options throttle, trailing, and leading which will be applied to the callback function.

import { watchThrottled } from '@vueuse/core'

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

Options

Option	Type	Default	Description
throttle	MaybeRefOrGetter<number>	0	Throttle interval in ms (can be reactive)
trailing	boolean	true	Invoke on the trailing edge
leading	boolean	true	Invoke on the leading edge

All standard watch options (deep, immediate, flush, etc.) are also supported.

Leading and Trailing

Control when the callback is invoked:

import { watchThrottled } from '@vueuse/core'

// Only invoke at the start of each throttle period
watchThrottled(source, callback, {
  throttle: 500,
  leading: true,
  trailing: false,
})

// Only invoke at the end of each throttle period
watchThrottled(source, callback, {
  throttle: 500,
  leading: false,
  trailing: true,
})

How It Works

It's essentially a shorthand for the following code:

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

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

Type Declarations

export interface WatchThrottledOptions<
  Immediate,
> extends WatchOptions<Immediate> {
  throttle?: MaybeRefOrGetter<number>
  trailing?: boolean
  leading?: boolean
}
export declare function watchThrottled<
  T extends Readonly<MultiWatchSources>,
  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