Skip to content

useTimeout ​

Category
Export Size
565 B
Last Changed
last year

Update value after a given time with controls.

Demo ​

Ready: false

Usage ​

js
import { promiseTimeout, useTimeout } from '@vueuse/core'

const ready = useTimeout(1000)
js
const { ready, start, stop } = useTimeout(1000, { controls: true })
js
console.log(ready.value) // false

await promiseTimeout(1200)

console.log(ready.value) // true

Type Declarations ​

typescript
export interface UseTimeoutOptions<Controls extends boolean>
  extends UseTimeoutFnOptions {
  /**
   * Expose more controls
   *
   * @default false
   */
  controls?: Controls
  /**
   * Callback on timeout
   */
  callback?: Fn
}
/**
 * Update value after a given time with controls.
 *
 * @see   {@link https://vueuse.org/useTimeout}
 * @param interval
 * @param options
 */
export declare function useTimeout(
  interval?: number,
  options?: UseTimeoutOptions<false>,
): ComputedRef<boolean>
export declare function useTimeout(
  interval: number,
  options: UseTimeoutOptions<true>,
): {
  ready: ComputedRef<boolean>
} & Stoppable

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Waleed Khaled
vaakian X
Jelf
Shinigami
Mark Noonan

Changelog ​

v9.3.0 on 9/26/2022
33dbc - feat: optional callback for useInterval, useTimeout & useTimestamp (#2240)
v9.0.0-beta.1 on 7/20/2022
4ca70 - fix(useTimeoutFn,useTimeout)!: rename type TimeoutOptions to UseTimeoutOptions and TimeoutFnOptions to UseTimeoutFnOptions (#1944)

Released under the MIT License.