debouncedRef

Creates a Vue ref with a debounced setter. Writes update the internal state and trigger subscribers after the delay, using requestAnimationFrame() inside the timeout callback.

When the initial value is itself a ref, external changes to that source ref are mirrored into the debounced ref.

Importing

import { debouncedRef } from '@almighty-shogun/common';

Usage

import { watch } from 'vue';
import { debouncedRef } from '@almighty-shogun/common';

const search = debouncedRef('', 300);

watch(search, value => {
    void fetch('/api/search?q=' + encodeURIComponent(value));
});

Parameters

initialValue: MaybeRefOrGetter<T>
Initial value, ref, or getter used to seed the debounced ref.

delay: number
Debounce delay in milliseconds.

immediate?: boolean
Whether the first debounced assignment should trigger immediately.
Default: false

Returns

A Vue ref whose setter triggers after the debounce delay.

Type signature

declare function debouncedRef<T>(
    initialValue: MaybeRefOrGetter<T>,
    delay: number,
    immediate?: boolean
): Ref<T>;