useInterval

类别

Animation

导出体积

457 B

上次更改

7 minutes ago

每个间隔递增的响应式计数器。

示例

源码playground (beta)

间隔: 0

使用方法

import { useInterval } from '@vueuse/core'

// 每200毫秒计数增加一次
const counter = useInterval(200)

含控制功能

import { useInterval } from '@vueuse/core'

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

// 将计数器重置为0
reset()

// 暂停/恢复计时器
pause()
resume()

选项

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

响应式间隔时间

间隔时间可以是响应式的：

import { useInterval } from '@vueuse/core'

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

// 动态改变间隔时间
intervalMs.value = 500

每次间隔时的回调

import { useInterval } from '@vueuse/core'

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

类型声明

export interface UseIntervalOptions<Controls extends boolean> {
  /**
   * 暴露更多控制选项
   *
   * @default false
   */
  controls?: Controls
  /**
   * 在调用时立即执行更新
   *
   * @default true
   */
  immediate?: boolean
  /**
   * 每个间隔上的回调函数
   */
  callback?: (count: number) => void
}
export interface UseIntervalControls {
  counter: ShallowRef<number>
  reset: () => void
}
export type UseIntervalReturn =
  | Readonly<ShallowRef<number>>
  | Readonly<UseIntervalControls & Pausable>
/**
 * 每个间隔上增加的响应式计数器
 *
 * @see https://vueuse.org/useInterval
 * @param interval
 * @param options
 */
export declare function useInterval(
  interval?: MaybeRefOrGetter<number>,
  options?: UseIntervalOptions<false>,
): Readonly<ShallowRef<number>>
export declare function useInterval(
  interval: MaybeRefOrGetter<number>,
  options: UseIntervalOptions<true>,
): Readonly<UseIntervalControls & Pausable>

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志