Skip to content

useDebounce

Category
Last Changed
3 months ago

Debounce execution of a ref value.

Demo

Delay is set to 1000ms for this demo.

Debounced:

Times Updated: 0

Usage




 



















import { useDebounce } from '@vueuse/core'

const input = ref('foo')
const debounced = useDebounce(input, 1000)

input.value = 'bar'
console.log(debounced.value) // 'foo'

await sleep(1100)

console.log(debounced.value) // 'bar'
import { useDebounce } from '@vueuse/core'

const input = ref('foo')
const debounced = useDebounce(input, 1000)

input.value = 'bar'
console.log(debounced.value) // 'foo'

await sleep(1100)

console.log(debounced.value) // 'bar'

You can also pass an optional 3rd parameter including maxWait option. See useDebounceFnfor details.

  • useThrottle
  • useThrottleFn
  • useDebounce
  • useDebounceFn

Type Declarations

/**
 * Debounce updates of a ref.
 *
 * @return A new debounced ref.
 */
export declare function useDebounce<T>(
  value: Ref<T>,
  ms?: number,
  options?: DebounceFilterOptions
): Readonly<Ref<T>>
/**
 * Debounce updates of a ref.
 *
 * @return A new debounced ref.
 */
export declare function useDebounce<T>(
  value: Ref<T>,
  ms?: number,
  options?: DebounceFilterOptions
): Readonly<Ref<T>>

Source

SourceDemoDocs

Contributors

Anthony Fu
Joe Maylor
wheat

Changelog

v6.9.0 on 11/14/2021
c5e01 - feat(debouncedRef): new alias
v6.8.0 on 11/6/2021
529ac - feat(useDebounce & useDebounceFn): accept maxMs parameter (#877)
v4.8.0 on 4/8/2021
715d5 - fix: make return type readonly, close #407 (#435)
useDebounce has loaded