1---
2category: Animation
3---
4 
5# useInterval
6 
7Reactive counter that increases on every interval.
8 
9## Usage
10 
11```ts
12import { useInterval } from '@vueuse/core'
13 
14// count will increase every 200ms
15const counter = useInterval(200)
16```
17 
18### With Controls
19 
20```ts
21import { useInterval } from '@vueuse/core'
22 
23const { counter, reset, pause, resume, isActive } = useInterval(200, {
24  controls: true,
25})
26 
27// Reset counter to 0
28reset()
29 
30// Pause/resume the interval
31pause()
32resume()
33```
34 
35### Options
36 
37| Option      | Type                      | Default | Description                                                |
38| ----------- | ------------------------- | ------- | ---------------------------------------------------------- |
39| `controls`  | `boolean`                 | `false` | Expose `pause`, `resume`, `reset`, and `isActive` controls |
40| `immediate` | `boolean`                 | `true`  | Start the interval immediately                             |
41| `callback`  | `(count: number) => void` | —       | Called on every interval with the current count            |
42 
43### Reactive Interval
44 
45The interval can be reactive:
46 
47```ts
48import { useInterval } from '@vueuse/core'
49 
50const intervalMs = ref(1000)
51const counter = useInterval(intervalMs)
52 
53// Change the interval dynamically
54intervalMs.value = 500
55```
56 
57### Callback on Every Interval
58 
59```ts
60import { useInterval } from '@vueuse/core'
61 
62useInterval(1000, {
63  callback: (count) => {
64    console.log(`Tick ${count}`)
65  },
66})
67```
68 
69## Type Declarations
70 
71```ts
72export interface UseIntervalOptions<Controls extends boolean> {
73  /**
74   * Expose more controls
75   *
76   * @default false
77   */
78  controls?: Controls
79  /**
80   * Execute the update immediately on calling
81   *
82   * @default true
83   */
84  immediate?: boolean
85  /**
86   * Callback on every interval
87   */
88  callback?: (count: number) => void
89}
90export interface UseIntervalControls {
91  counter: ShallowRef<number>
92  reset: () => void
93}
94export type UseIntervalReturn =
95  | Readonly<ShallowRef<number>>
96  | Readonly<UseIntervalControls & Pausable>
97/**
98 * Reactive counter increases on every interval
99 *
100 * @see https://vueuse.org/useInterval
101 * @param interval
102 * @param options
103 */
104export declare function useInterval(
105  interval?: MaybeRefOrGetter<number>,
106  options?: UseIntervalOptions<false>,
107): Readonly<ShallowRef<number>>
108export declare function useInterval(
109  interval: MaybeRefOrGetter<number>,
110  options: UseIntervalOptions<true>,
111): Readonly<UseIntervalControls & Pausable>
112```
113