useInterval

类别

Animation

导出大小

457 B

最近修改

2 days ago

每个间隔都会增加的响应式计数器。

🌐 Reactive counter that increases on every interval.

示例

源代码在线运行

Interval fired: 0

用法

🌐 Usage

import { useInterval } from '@vueuse/core'

// count will increase every 200ms
const counter = useInterval(200)

带控制

🌐 With Controls

import { useInterval } from '@vueuse/core'

const { counter, reset, pause, resume, isActive } = useInterval(200, {
  controls: true,
})

// Reset counter to 0
reset()

// Pause/resume the interval
pause()
resume()

选项

🌐 Options

选项	类型	默认值	描述
controls	boolean	false	暴露 pause、resume、reset 和 isActive 控件
immediate	boolean	true	立即启动间隔
callback	(count: number) => void	—	每个间隔调用，传入当前计数

反应间隔

🌐 Reactive Interval

间隔可以是反应性的：

🌐 The interval can be reactive:

import { useInterval } from '@vueuse/core'

const intervalMs = ref(1000)
const counter = useInterval(intervalMs)

// Change the interval dynamically
intervalMs.value = 500

每个间隔的回调

🌐 Callback on Every Interval

import { useInterval } from '@vueuse/core'

useInterval(1000, {
  callback: (count) => {
    console.log(`Tick ${count}`)
  },
})