useTimeout

类别

动画

导出体积

403 B

上次更改

7 minutes ago

响应式值，在指定时间后变为 true。

示例

源码playground (beta)

准备就绪：false

使用方法

import { useTimeout } from '@vueuse/core'

const ready = useTimeout(1000)

1 秒后，ready.value 变为 true。

带控制功能

import { useTimeout } from '@vueuse/core'

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

// 检查超时是否处于等待状态
console.log(isPending.value) // true

// 停止超时
stop()

// 启动/重启超时
start()

选项

选项	类型	默认值	描述
controls	boolean	false	暴露 start、stop 和 isPending 控制方法
immediate	boolean	true	是否立即开始超时
callback	() => void	—	超时完成时调用的回调函数

超时回调

import { useTimeout } from '@vueuse/core'

useTimeout(1000, {
  callback: () => {
    console.log('超时完成！')
  },
})

响应式时长

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

import { useTimeout } from '@vueuse/core'

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

// 修改时长（仅对使用控制功能时的未来超时生效）
duration.value = 2000

类型声明

export interface UseTimeoutOptions<
  Controls extends boolean,
> extends UseTimeoutFnOptions {
  /**
   * 暴露更多控制选项
   *
   * @default false
   */
  controls?: Controls
  /**
   * 超时时的回调函数
   */
  callback?: Fn
}
export type UseTimeoutReturn =
  | ComputedRef<boolean>
  | ({
      readonly ready: ComputedRef<boolean>
    } & Stoppable)
/**
 * @deprecated use UseTimeoutReturn instead
 */
export type UseTimoutReturn = UseTimeoutReturn
/**
 * 在一定时间后更新值，并带有控制功能。
 *
 * @see   {@link https://vueuse.org/useTimeout}
 * @param interval
 * @param options
 */
export declare function useTimeout(
  interval?: MaybeRefOrGetter<number>,
  options?: UseTimeoutOptions<false>,
): ComputedRef<boolean>
export declare function useTimeout(
  interval: MaybeRefOrGetter<number>,
  options: UseTimeoutOptions<true>,
): {
  ready: ComputedRef<boolean>
} & Stoppable

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志