useTimeout 组合式API

Quasar v2.15+

useTimeout() 组合式API在功能上类似于原生的 setTimeout()，但有一些关键区别。一旦您触发了setTimeout(fn, delay)，它将在指定的延迟后执行，无论如何。而useTimeout()可以被"取消"。您也可以在超时到期前覆盖执行的函数。

换句话说，如果您想在延迟后安排一个函数，但您可能想在延迟发生前覆盖它甚至取消它，这就是适合您的组合式API。

当您的组件被销毁时，useTimeout组合式API还会自动取消（如果它已注册且仍在等待）。

语法

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)
    }, 2000) // 2秒后
  }

  // ...

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

  // 请注意，每次注册/覆盖超时时
  // 延迟都会重置
}

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

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

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

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

1. Introduction

2. 语法

3. 示例