中午好哇,一上午的时间过的真快,这都快要吃午饭啦,突击询问有想好吃什么吗???当然,这不是重点,重点是我今天要说的这个定时器,以及和他搭配的取消定时器,话不多说,开始我们的新内容
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
好啦,这就是这篇文章我要说的内容啦,下次见