Skip to page content

useInterval 组合式API
Quasar v2.15.1+

useInterval() 组合式API在功能上类似于原生的 setInterval(),但有一些关键区别。该组合式API会在组件被销毁时自动"取消"定时器,并且您还可以在定时器运行时覆盖执行的函数。

在 SSR 服务端,注册定时器是一个空操作(no-op)。请在组件渲染生命周期之外显式启动服务端任务,而不是在 setup() 中创建定时器。

在组件之外使用

该 composable 也可以在 setup() 之外调用:在 boot 文件、store 或普通模块中。在那里没有任何东西会自动停止定时器,因为没有组件会被销毁或停用(deactivated):完成后请调用 removeInterval()。

语法

import { useInterval } from 'quasar'

setup () {
  const {
    registerInterval,
    removeInterval,
    isIntervalActive
  } = useInterval()

  // ...
}
function useInterval(): {
  registerInterval(fn: () => void, interval?: string | number): void
  removeInterval(): void
  isIntervalActive: Ref<boolean> // v2.34+
}

示例

import { useInterval } from 'quasar'

setup () {
  const { registerInterval } = useInterval()

  function onSomeEvent (param) {
    registerInterval(() => {
      console.log('参数是', param)
    }, 2000) // 每2秒执行一次
  }

  // ...

  // 您可以连续多次调用onSomeEvent(),
  // 但只有最后一次注册的函数会在
  // 到达执行时间时运行

  // 请注意,每次注册/覆盖时
  // 定时器都会重置
}

如果您需要在一个组件中使用多个useInterval(),只需重命名返回对象中的属性:

const {
  registerInterval: registerFirstInterval,
  removeInterval: removeFirstInterval,
  isIntervalActive: isFirstIntervalActive
} = useInterval()

const {
  registerInterval: registerSecondInterval,
  removeInterval: removeSecondInterval,
  isIntervalActive: isSecondIntervalActive
} = useInterval()

运行状态
v2.34+

返回的 isIntervalActive 是一个响应式的布尔 Ref,当定时器已注册时为 true。当你调用 removeInterval()、或组件被销毁或停用(deactivated)时,它会变为 false。在 SSR 或 SSG 模式的服务端,它始终为 false。

<template>
  <q-btn
    :label="isIntervalActive ? 'Stop polling' : 'Start polling'"
    @click="isIntervalActive ? removeInterval() : registerInterval(poll, 5000)"
  />
</template>

<script setup>
  import { useInterval } from 'quasar'

  const { registerInterval, removeInterval, isIntervalActive } = useInterval()

  function poll() {
    // ...
  }
</script>