The useTimeout() composable is similar in scope with the native setTimeout(), with some key differences. The composable takes care of “cancelling” the timeout if your component gets destroyed or deactivated (keep-alive related) and you can also override the executing Function before the timeout expires.
In other words, if you want to schedule a function after a delay but you might want to override it or even cancel it before the delay happens, this is the composable for you.
On the server-side of SSR or SSG modes, registering a timeout is a no-op. Start server-side work explicitly outside the component rendering lifecycle rather than creating a timer during setup().
The composable can also be called outside of setup(): in a boot file, a store or a plain module. Nothing cancels a pending timeout by itself there, as no component gets destroyed or deactivated: call removeTimeout() when you no longer want it to fire.
Syntax
import { useTimeout } from 'quasar'
setup () {
const {
registerTimeout,
removeTimeout,
isTimeoutPending
} = useTimeout()
// ...
}function useTimeout(): {
registerTimeout(fn: () => void, delay?: string | number): void
removeTimeout(): void
isTimeoutPending: Ref<boolean> // v2.34+
}Example
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
}Should you need more than one useTimeout() per component, simply rename the properties of the returned object:
const {
registerTimeout: registerFirstTimeout,
removeTimeout: removeFirstTimeout,
isTimeoutPending: isFirstTimeoutPending
} = useTimeout()
const {
registerTimeout: registerSecondTimeout,
removeTimeout: removeSecondTimeout,
isTimeoutPending: isSecondTimeoutPending
} = useTimeout()Pending state v2.34+
The returned isTimeoutPending is a reactive boolean Ref which is true while a registered Function is waiting to run. It turns false right before the Function executes, when you call removeTimeout(), and when the component gets destroyed or deactivated. On the server-side of SSR or SSG modes it is always false.
<template>
<q-btn label="Save" :loading="isTimeoutPending" @click="onSave" />
</template>
<script setup>
import { useTimeout } from 'quasar'
const { registerTimeout, isTimeoutPending } = useTimeout()
function onSave() {
// debounce: only the last click within 500ms saves
registerTimeout(() => {
// ...
}, 500)
}
</script>For this exact pattern, a Function that runs once the calls stop coming, the useDebounce composable wraps your Function directly and forwards its arguments.