1---
2category: Animation
3---
4 
5# useTimeout
6 
7Reactive value that becomes `true` after a given time.
8 
9## Usage
10 
11```ts
12import { useTimeout } from '@vueuse/core'
13 
14const ready = useTimeout(1000)
15```
16 
17After 1 second, `ready.value` becomes `true`.
18 
19### With Controls
20 
21```ts
22import { useTimeout } from '@vueuse/core'
23 
24const { ready, start, stop, isPending } = useTimeout(1000, { controls: true })
25 
26// Check if timeout is pending
27console.log(isPending.value) // true
28 
29// Stop the timeout
30stop()
31 
32// Start/restart the timeout
33start()
34```
35 
36### Options
37 
38| Option      | Type         | Default | Description                                      |
39| ----------- | ------------ | ------- | ------------------------------------------------ |
40| `controls`  | `boolean`    | `false` | Expose `start`, `stop`, and `isPending` controls |
41| `immediate` | `boolean`    | `true`  | Start the timeout immediately                    |
42| `callback`  | `() => void` | —       | Called when the timeout completes                |
43 
44### Callback on Timeout
45 
46```ts
47import { useTimeout } from '@vueuse/core'
48 
49useTimeout(1000, {
50  callback: () => {
51    console.log('Timeout completed!')
52  },
53})
54```
55 
56### Reactive Interval
57 
58The timeout duration can be reactive:
59 
60```ts
61import { useTimeout } from '@vueuse/core'
62 
63const duration = ref(1000)
64const ready = useTimeout(duration)
65 
66// Change the duration (only affects future timeouts when using controls)
67duration.value = 2000
68```
69 
70## Type Declarations
71 
72```ts
73export interface UseTimeoutOptions<
74  Controls extends boolean,
75> extends UseTimeoutFnOptions {
76  /**
77   * Expose more controls
78   *
79   * @default false
80   */
81  controls?: Controls
82  /**
83   * Callback on timeout
84   */
85  callback?: Fn
86}
87export type UseTimeoutReturn =
88  | ComputedRef<boolean>
89  | ({
90      readonly ready: ComputedRef<boolean>
91    } & Stoppable)
92/**
93 * @deprecated use UseTimeoutReturn instead
94 */
95export type UseTimoutReturn = UseTimeoutReturn
96/**
97 * Update value after a given time with controls.
98 *
99 * @see   {@link https://vueuse.org/useTimeout}
100 * @param interval
101 * @param options
102 */
103export declare function useTimeout(
104  interval?: MaybeRefOrGetter<number>,
105  options?: UseTimeoutOptions<false>,
106): ComputedRef<boolean>
107export declare function useTimeout(
108  interval: MaybeRefOrGetter<number>,
109  options: UseTimeoutOptions<true>,
110): {
111  ready: ComputedRef<boolean>
112} & Stoppable
113```
114