useInterval 组合

Quasar v2.15.1+

useInterval() 可组合项的作用域与原生 setInterval() 类似，但也存在一些关键区别。如果组件被销毁，可组合组件会处理 “cancelling” 间隔，并且你还可以在执行函数运行时覆盖它。

¥The useInterval() composable is similar in scope with the native setInterval(), with some key differences. The composable takes care of “cancelling” the interval if your component gets destroyed and you can also override the executing Function while it’s running.

语法(Syntax)

¥Syntax

import { useInterval } from 'quasar'

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

  // ...
}

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

示例(Example)

¥Example

import { useInterval } from 'quasar'

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

  function onSomeEvent (param) {
    registerInterval(() => {
      console.log('param is', param)
    }, 2000) // every 2 seconds
  }

  // ...

  // You can call onSomeEvent() multiple
  // times in a row and only the last
  // registered Function will run when it
  // is time for it

  // Note that the interval is reset each
  // time you register/override it
}

如果每个组件需要多个 useInterval()，只需重命名返回对象的函数即可：

¥Should you need more than one useInterval() per component, simply rename the functions of the returned object:

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

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

1. Introduction

2. 语法(Syntax)

3. 示例(Example)