中午好哇,一上午的时间过的真快,这都快要吃午饭啦,突击询问有想好吃什么吗???当然,这不是重点,重点是我今天要说的这个定时器,以及和他搭配的取消定时器,话不多说,开始我们的新内容
setTimeout都不陌生就是定时器,他可以这样用
setTimeout(() => {
dealData.forEach(e=>{
if(aw(e).quan){
p.planList.push({
planid:aw(e).planId,
quan:aw(e).quan,
detai:aw(e).detai
})
}
})
或者是
setTimeout(()=>{
policeFormRef.value.init()
})
再或者
let timear = setTimeout(() => {
resolve(true)
}, 50);
等等等等很多用法,只要是可以用得到定时器的地方,功效还是很大的1000=1s哦,基本格式也简单就是setTimeout(()) = 》{ }
说完了setTimeout这个定时器,跟他打配合的当然是清除定时器clearTimeout(),它 是JavaScript中的一个函数,用来取消由setTimeout
设置的定时器
在Vue.js环境中使用此函数时,你可能会在以下场景见到它:
-
组件卸载前清理资源:为了防止内存泄漏,在Vue组件的生命周期钩子
beforeUnmount
或unmounted
中,可以调用clearTimeout
来取消尚未执行的定时任务。 -
表单验证、输入提示等交互控制:在用户交互过程中,如果需要根据特定条件启动一个定时器(比如显示提示信息一段时间后自动隐藏),那么在条件改变时(如用户输入、点击按钮等),可以通过
clearTimeout
来取消旧的定时器并重新设置,以保证UI行为的准确性
下边是一个例子:
<template>
<button @click="startTimer">开始计时</button>
<button @click="stopTimer">停止计时</button>
</template>
<script>
export default {
setup() {
let timerId = null;
const startTimer = () => {
timerId = setTimeout(() => {
console.log('计时结束');
}, 5000);
};
const stopTimer = () => {
if (timerId) {
clearTimeout(timerId);
timerId = null;
console.log('计时已停止');
}
};
return {
startTimer,
stopTimer,
};
},
};
</script>
在这个例子中,当用户点击“开始计时”按钮时,会启动一个5秒后的计时任务;点击“停止计时”按钮,则会取消这个计时器。
代码中使用到的像这样
let timear = setTimeout(() => {
clearTimeout(timear)
resolve(true)
}, 50);
}
在内部,自己使用完自己消除,避免造成内存多余的占用,或者出现其他的bug
好啦,这就是这篇文章我要说的内容啦,下次见