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),
  },
)