useTimeout

类别

Animation

导出大小

403 B

最近修改

2 days ago

在给定时间后变为 true 的响应式值。

🌐 Reactive value that becomes true after a given time.

示例

源代码在线运行

Ready: false

用法

🌐 Usage

import { useTimeout } from '@vueuse/core'

const ready = useTimeout(1000)

1秒后，ready.value 变为 true。

🌐 After 1 second, ready.value becomes true.

带控制

🌐 With Controls

import { useTimeout } from '@vueuse/core'

const { ready, start, stop, isPending } = useTimeout(1000, { controls: true })

// Check if timeout is pending
console.log(isPending.value) // true

// Stop the timeout
stop()

// Start/restart the timeout
start()

选项

🌐 Options

选项	类型	默认值	描述
controls	boolean	false	暴露 start、stop 和 isPending 控件
immediate	boolean	true	立即启动超时
callback	() => void	—	超时完成时调用

超时回调

🌐 Callback on Timeout

import { useTimeout } from '@vueuse/core'

useTimeout(1000, {
  callback: () => {
    console.log('Timeout completed!')
  },
})

反应间隔

🌐 Reactive Interval

超时时间可以是响应式的：

🌐 The timeout duration can be reactive:

import { useTimeout } from '@vueuse/core'

const duration = ref(1000)
const ready = useTimeout(duration)

// Change the duration (only affects future timeouts when using controls)
duration.value = 2000