useTick() 可组合项的范围与 Vue 的 nextTick() 类似，但也有一些关键区别。一旦触发 nextTick() 函数，无论如何，它都会在下一个 “tick” 执行。另一方面，useTick() 可以是 “cancelled”。你也可以覆盖它。

¥The useTick() composable is similar in scope with the nextTick() from Vue, with some key differences. Once you trigger a nextTick() it will get executed in the next “tick” no matter what. The useTick() on the other hand, can be “cancelled”. You can also override it.

换句话说，如果你想在下一个 Vue “tick” 上调度某个函数，但你可能希望覆盖它甚至取消它，那么这就是适合你的可组合项。

¥In other words, if you want to schedule a function on the next Vue “tick” but you might want to override it or even cancel it, this is the composable for you.

useTick 可组合函数还会在组件销毁时自动取消下一个已注册的 “tick”（如果已注册且仍处于待处理状态）。

¥The useTick composable also automatically cancels the next registered “tick” (if any was registered and still pending) when your component gets destroyed.

语法(Syntax)

¥Syntax

import { useTick } from 'quasar'

setup () {
  const {
    registerTick,
    removeTick
  } = useTick()

  // ...
}

function useTick(): {
  registerTick(fn: () => void): void;
  removeTick(): void;
};

示例(Example)

¥Example

import { useTick } from 'quasar'

setup () {
  const { registerTick } = useTick()

  function onSomeEvent (param) {
    registerTick(() => {
      console.log('param is', param)
    })
  }

  // ...

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

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

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

const {
  registerTick: registerFirstTick,
  removeTick: removeFirstTick
} = useTick()

const {
  registerTick: registerSecondTick,
  removeTick: removeSecondTick
} = useTick()