Timernya dipasang begitu composable-nya dipanggil, sama seperti sumbernya, dan ikut dibatalkan saat scope-nya mati. start() memasang ulang dari awal — berguna untuk pola "sembunyikan pesan tiga detik setelah kemunculan terakhirnya", di mana tiap kemunculan baru harus menyetel ulang hitungannya.
delay negatif berarti jangan dijalankan sama sekali.
Installation
pnpm dlx shadcn-vue@latest add @kliping/use-timeout Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: is-browser.
Salin dulu is-browser — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
ts
import { getCurrentScope, onScopeDispose, readonly, ref, toValue, watch } from 'vue'
import type { MaybeRefOrGetter } from 'vue'
import { isBrowser } from '@/lib/is-browser'
export function useTimeout(fn: () => void, delay: MaybeRefOrGetter<number> = 0) {
const isPending = ref(false)
let timer: ReturnType<typeof setTimeout> | undefined
const stop = () => {
if (timer !== undefined) {
clearTimeout(timer)
timer = undefined
}
isPending.value = false
}
const start = () => {
stop()
if (!isBrowser) return
const ms = toValue(delay)
if (ms < 0) return
isPending.value = true
timer = setTimeout(() => {
timer = undefined
isPending.value = false
fn()
}, ms)
}
watch(() => toValue(delay), start, { immediate: true })
if (getCurrentScope()) onScopeDispose(stop)
return { isPending: readonly(isPending), start, stop }
}API
ts
export function useTimeout(
fn: () => void,
delay: MaybeRefOrGetter<number> = 0,
)