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>