fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.7 KiB
1.7 KiB
category, alias
| category | alias |
|---|---|
| Reactivity | useDebounce, debouncedRef |
refDebounced
Debounce execution of a ref value.
Usage
import { refDebounced } from '@vueuse/core';
import { shallowRef } from 'vue';
const input = shallowRef('foo');
const debounced = refDebounced(input, 1000);
input.value = 'bar';
console.log(debounced.value); // 'foo'
await sleep(1100);
console.log(debounced.value); // 'bar'
// ---cut-after---
function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
An example with object ref.
import { refDebounced } from '@vueuse/core';
import { shallowRef } from 'vue';
const data = shallowRef({
name: 'foo',
age: 18,
});
const debounced = refDebounced(data, 1000);
function update() {
data.value = {
...data.value,
name: 'bar',
};
}
console.log(debounced.value); // { name: 'foo', age: 18 }
update();
await sleep(1100);
console.log(debounced.value); // { name: 'bar', age: 18 }
You can also pass an optional 3rd parameter including maxWait option. See useDebounceFn for details.
Recommended Reading
Type Declarations
export type RefDebouncedReturn<T = any> = Readonly<Ref<T>>;
/**
* Debounce updates of a ref.
*
* @return A new debounced ref.
*/
export declare function refDebounced<T>(
value: Ref<T>,
ms?: MaybeRefOrGetter<number>,
options?: DebounceFilterOptions,
): RefDebouncedReturn<T>;
/** @deprecated use `refDebounced` instead */
export declare const debouncedRef: typeof refDebounced;
/** @deprecated use `refDebounced` instead */
export declare const useDebounce: typeof refDebounced;