Memulai
Siklus Hidup
Peramban
Pengembangan
Paket Luar
useTimeout
Menjalankan sesuatu sekali, setelah jeda.
Pesan ini hilang 3 detik setelah muncul.
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.
Pemasangan
npx 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 menunggu = ref(false)
let timer: ReturnType<typeof setTimeout> | undefined
const stop = () => {
if (timer !== undefined) {
clearTimeout(timer)
timer = undefined
}
menunggu.value = false
}
const start = () => {
stop()
// Lihat catatan yang sama di `use-interval`: timer yang dibuat saat render
// server menahan proses build-nya tetap hidup.
if (!isBrowser)
return
const jeda = toValue(delay)
if (jeda < 0)
return
menunggu.value = true
timer = setTimeout(() => {
timer = undefined
menunggu.value = false
fn()
}, jeda)
}
watch(() => toValue(delay), start, { immediate: true })
if (getCurrentScope())
onScopeDispose(stop)
return { isPending: readonly(menunggu), start, stop }
}API
ts
export function useTimeout(
fn: () => void,
delay: MaybeRefOrGetter<number> = 0,
)