watchDebounced

v0.0.15testeddemo

Debounced `watch`. The callback is postponed until `debounce` milliseconds have elapsed since the last source change; an optional `maxWait` caps how long it can be delayed under sustained changes. Implemented via an event filter so the public surface matches `watch` exactly.

Source Tests

Examples

const search = ref('');
watchDebounced(search, value => fetchResults(value), { debounce: 300 });

// Guarantee the callback runs at least every 1000ms while typing continuously
watchDebounced(input, save, { debounce: 300, maxWait: 1000 });

Demo

Loading demo…

Signatures

export function watchDebounced<T, Immediate extends Readonly<boolean> = false>(
  source: WatchSource<T>,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchDebouncedOptions<Immediate>,
): WatchHandle;

export function watchDebounced<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(
  sources: [...T],
  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
  options?: WatchDebouncedOptions<Immediate>,
): WatchHandle;

export function watchDebounced<T extends object, Immediate extends Readonly<boolean> = false>(
  source: T,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchDebouncedOptions<Immediate>,
): WatchHandle;

Type Parameters

Immediateextends Readonly<boolean>= false

Parameters

Parameter	Type	Default	Description
`source`	`object \| WatchSource<unknown> \| MultiWatchSources`	—	The reactive source (ref, getter, reactive object, or array of sources) to watch
`cb`	`WatchCallback`	—	Invoked with the new value, old value, and `onCleanup` once the debounce settles
`options`?	`WatchDebouncedOptions<Immediate>`	`{}`	Watch options plus `debounce` (ms) and `maxWait` (ms ceiling)

Returns

WatchHandleA handle to stop watching (also cancels a pending invocation)