为什么捐赠
API 浏览器
Vue 组合式函数
useQuasar
useDialogPluginComponent
useFormChild
useMeta
useHydration
new
useId
new
useInterval
new
useRenderCache
new
useTick
new
useTimeout
new
useSplitAttrs
new
联系站长
useInterval 组合式API
Quasar v2.15.1+

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

语法

import { useInterval } from 'quasar'

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

  // ...
}
function useInterval(): {
  registerInterval(fn: () => void, interval: string | number): void;
  removeInterval(): void;
};

示例

import { useInterval } from 'quasar'

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

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

  // ...

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

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

如果您需要在一个组件中使用多个useInterval()，只需重命名返回对象中的函数：

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

const { registerInterval: registerSecondInterval, removeInterval: removeSecondInterval } =
  useInterval();
还想了解更多？
Vue 组合式函数
useId
Vue 组合式函数
useRenderCache
发现错误？在浏览器中编辑此页
1. Introduction
2. 语法
3. 示例