1---
2category: Watch
3alias: throttledWatch
4---
5 
6# watchThrottled
7 
8Throttled watch. The callback will be invoked at most once per specified duration.
9 
10## Usage
11 
12Similar to `watch`, but offering extra options `throttle`, `trailing`, and `leading` which will be applied to the callback function.
13 
14```ts
15import { watchThrottled } from '@vueuse/core'
16 
17watchThrottled(
18  source,
19  () => { console.log('changed!') },
20  { throttle: 500 },
21)
22```
23 
24### Options
25 
26| Option     | Type                       | Default | Description                               |
27| ---------- | -------------------------- | ------- | ----------------------------------------- |
28| `throttle` | `MaybeRefOrGetter<number>` | `0`     | Throttle interval in ms (can be reactive) |
29| `trailing` | `boolean`                  | `true`  | Invoke on the trailing edge               |
30| `leading`  | `boolean`                  | `true`  | Invoke on the leading edge                |
31 
32All standard `watch` options (`deep`, `immediate`, `flush`, etc.) are also supported.
33 
34### Leading and Trailing
35 
36Control when the callback is invoked:
37 
38```ts
39import { watchThrottled } from '@vueuse/core'
40 
41// Only invoke at the start of each throttle period
42watchThrottled(source, callback, {
43  throttle: 500,
44  leading: true,
45  trailing: false,
46})
47 
48// Only invoke at the end of each throttle period
49watchThrottled(source, callback, {
50  throttle: 500,
51  leading: false,
52  trailing: true,
53})
54```
55 
56## How It Works
57 
58It's essentially a shorthand for the following code:
59 
60```ts
61import { throttleFilter, watchWithFilter } from '@vueuse/core'
62 
63watchWithFilter(
64  source,
65  () => { console.log('changed!') },
66  {
67    eventFilter: throttleFilter(500),
68  },
69)
70```
71 
72## Type Declarations
73 
74```ts
75export interface WatchThrottledOptions<
76  Immediate,
77> extends WatchOptions<Immediate> {
78  throttle?: MaybeRefOrGetter<number>
79  trailing?: boolean
80  leading?: boolean
81}
82export declare function watchThrottled<
83  T extends Readonly<MultiWatchSources>,
84  Immediate extends Readonly<boolean> = false,
85>(
86  sources: [...T],
87  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
88  options?: WatchThrottledOptions<Immediate>,
89): WatchHandle
90export declare function watchThrottled<
91  T,
92  Immediate extends Readonly<boolean> = false,
93>(
94  source: WatchSource<T>,
95  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
96  options?: WatchThrottledOptions<Immediate>,
97): WatchHandle
98export declare function watchThrottled<
99  T extends object,
100  Immediate extends Readonly<boolean> = false,
101>(
102  source: T,
103  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
104  options?: WatchThrottledOptions<Immediate>,
105): WatchHandle
106/** @deprecated use `watchThrottled` instead */
107export declare const throttledWatch: typeof watchThrottled
108```
109