Skip to content
On this page

useInterval

Category
Last Changed
5 months ago

Reactive counter increases on every interval

Demo

Interval fired: 0

Usage




 





import { useInterval } from '@vueuse/core'

// count will increase every 200ms
const counter = useInterval(200)
import { useInterval } from '@vueuse/core'

// count will increase every 200ms
const counter = useInterval(200)
const { counter, pause, resume } = useInterval(200, { controls: true })
const { counter, pause, resume } = useInterval(200, { controls: true })

Type Declarations

export interface IntervalOptions<Controls extends boolean> {
  /**
   * Expose more controls
   *
   * @default false
   */
  controls?: Controls
  /**
   * Exccute the update immediately on calling
   *
   * @default true
   */
  immediate?: boolean
}
export declare function useInterval(
  interval?: MaybeRef<number>,
  options?: IntervalOptions<false>
): Ref<number>
export declare function useInterval(
  interval: MaybeRef<number>,
  options: IntervalOptions<true>
): {
  counter: Ref<number>
} & Pausable
export interface IntervalOptions<Controls extends boolean> {
  /**
   * Expose more controls
   *
   * @default false
   */
  controls?: Controls
  /**
   * Exccute the update immediately on calling
   *
   * @default true
   */
  immediate?: boolean
}
export declare function useInterval(
  interval?: MaybeRef<number>,
  options?: IntervalOptions<false>
): Ref<number>
export declare function useInterval(
  interval: MaybeRef<number>,
  options: IntervalOptions<true>
): {
  counter: Ref<number>
} & Pausable

Source

SourceDemoDocs

Contributors

Anthony Fu
Jelf
Nurettin Kaya

Changelog

v7.6.0 on 2/8/2022
a2b2b - feat: support ref as interval (#1215)
useInterval has loaded