Memulai
Siklus Hidup
Peramban
Pengembangan
Paket Luar
useDebounce
Salinan sebuah nilai yang tertinggal beberapa saat di belakangnya.
Langsung: —
Tertunda 500 ms: —
Dipakai untuk memisahkan yang cepat dari yang mahal: kotak pencarian memperbarui kueri di tiap ketukan, sementara permintaan jaringannya mengikuti kueriTertunda yang cuma berubah setelah pengetikan berhenti.
Sumbernya boleh berupa nilai biasa, ref, atau getter — dibaca lewat toValue(), jadi ketiganya bekerja tanpa pembungkus.
Pemasangan
npx shadcn-vue@latest add @kliping/use-debounce Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: use-debounce-fn.
Salin dulu use-debounce-fn — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
ts
import { getCurrentScope, onScopeDispose, ref, toValue, watch } from 'vue'
import type { MaybeRefOrGetter, Ref } from 'vue'
import { useDebounceFn } from '@/composables/use-debounce-fn'
import type { UseDebounceFnOptions } from '@/composables/use-debounce-fn'
export function useDebounce<T>(
value: MaybeRefOrGetter<T>,
wait: MaybeRefOrGetter<number> = 1000,
options?: UseDebounceFnOptions,
) {
const tertunda = ref(toValue(value)) as Ref<T>
const { run, cancel } = useDebounceFn(
(baru: T) => {
tertunda.value = baru
},
wait,
options,
)
watch(() => toValue(value), baru => run(baru))
// `watch` sudah berhenti sendiri bersama scope-nya, tapi timer yang sedang
// menunggu tidak. Tanpa baris ini, satu penulisan ke `ref` yang sudah tidak
// dipakai lagi tetap terjadi setelah komponennya hilang.
if (getCurrentScope())
onScopeDispose(cancel)
return tertunda
}API
ts
export function useDebounce<T>(
value: MaybeRefOrGetter<T>,
wait: MaybeRefOrGetter<number> = 1000,
options?: UseDebounceFnOptions,
)