useTimeout() 组合式API在功能上类似于原生的 setTimeout()，但有一些关键区别。一旦您触发了setTimeout(fn, delay)，它将在指定的延迟后执行，无论如何。而useTimeout()可以被"取消"。您也可以在超时到期前覆盖执行的函数。
换句话说，如果您想在延迟后安排一个函数，但您可能想在延迟发生前覆盖它甚至取消它，这就是适合您的组合式API。
当您的组件被销毁时，useTimeout组合式API还会自动取消（如果它已注册且仍在等待）。
TIP
在 SSR 或 SSG 模式的服务端，注册超时定时器是一个空操作（no-op）。请在组件渲染生命周期之外显式启动服务端任务，而不是在 setup() 中创建定时器。
在组件之外使用
该 composable 也可以在 setup() 之外调用：在 boot 文件、store 或普通模块中。在那里没有任何东西会自动取消等待中的定时器，因为没有组件会被销毁或停用（deactivated）：当你不再希望它触发时，请调用 removeTimeout()。
语法
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+
}示例
import { useTimeout } from 'quasar'
setup () {
const { registerTimeout } = useTimeout()
function onSomeEvent (param) {
registerTimeout(() => {
console.log('参数是', param)
}, 2000) // 2秒后
}
// ...
// 您可以连续多次调用onSomeEvent()，
// 但只有最后一次注册的函数会在
// 到达执行时间时运行
// 请注意，每次注册/覆盖超时时
// 延迟都会重置
}如果您需要在一个组件中使用多个useTimeout()，只需重命名返回对象中的属性：
const {
registerTimeout: registerFirstTimeout,
removeTimeout: removeFirstTimeout,
isTimeoutPending: isFirstTimeoutPending
} = useTimeout()
const {
registerTimeout: registerSecondTimeout,
removeTimeout: removeSecondTimeout,
isTimeoutPending: isSecondTimeoutPending
} = useTimeout()等待状态 v2.34+
返回的 isTimeoutPending 是一个响应式的布尔 Ref，当已注册的函数正在等待执行时为 true。它会在函数执行前一刻、当你调用 removeTimeout()、以及组件被销毁或停用（deactivated）时变为 false。在 SSR 或 SSG 模式的服务端，它始终为 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>