useTimeout 可组合函数

Quasar v2.15+

该 useTimeout() 可组合函数在范围上与原生 setTimeout() 相似，但也有一些关键区别。一旦触发 setTimeout(fn, delay)，无论发生什么，它将在指定延迟后执行。另一方面，useTimeout() 可以“取消”。你也可以在超时到期之前覆盖正在执行的函数。

换句话说，如果你想在延迟后安排一个函数，但你可能想在延迟发生之前覆盖它甚至取消它，那么这个可组合函数适合你。

该 useTimeout 可组合函数还会在你的组件被销毁时自动取消（如果它已注册且仍处于待处理状态）。

语法

import { useTimeout } from 'quasar'

setup () {
  const {
    registerTimeout,
    removeTimeout
  } = useTimeout()

  // ...
}

function useTimeout(): {
  registerTimeout(fn: () => void, delay?: string | number): void;
  removeTimeout(): void;
};

示例

import { useTimeout } from 'quasar'

setup () {
  const { registerTimeout } = useTimeout()

  function onSomeEvent (param) {
    registerTimeout(() => {
      console.log('param is', param)
    }, 2000) // in 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 delay is reset each
  // time you register/override the timeout
}

如果你需要在每个组件中使用多个 useTimeout()，只需重命名返回对象的函数

const {
  registerTimeout: registerFirstTimeout,
  removeTimeout: removeFirstTimeout
} = useTimeout()

const {
  registerTimeout: registerSecondTimeout,
  removeTimeout: removeSecondTimeout
} = useTimeout()

发现错误？在浏览器中编辑此页面

1. 介绍

2. 语法

3. 示例