useTick composable
v2.15+

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.

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.

The useTick composable also automatically cancels the next registered “tick” (if any was registered and still pending) when your component gets destroyed or deactivated (keep-alive related).

Outside of a component

The composable can also be called outside of setup(): in a boot file, a store or a plain module. Nothing cancels a pending tick by itself there, as no component gets destroyed or deactivated: call removeTick() when you no longer want it to run.

Syntax

import { useTick } from 'quasar'

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

  // ...
}

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

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
}

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()

useTick composable v2.15+

Syntax

Example

useTick composable
v2.15+