Vue清除定时器setInterval优化方案分享
更新时间：2020年07月21日 09:56:18 作者：Object_name
这篇文章主要介绍了Vue清除定时器setInterval优化方案分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
两种方案清除定时器，开发者经常使用方案1，建议使用方案2
方案1
首先我在data函数里面进行定义定时器名称：
data() {
return {
timer: null // 定时器名称
}
},
然后这样使用定时器：
this.timer = (() => {
// 某些操作
}, 1000)
最后在beforeDestroy()生命周期内清除定时器：
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
方案1有两点不好的地方，引用尤大的话来说就是：
它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。
方案2
该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。
以下是完整代码：
const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
其他程序化的事件侦听器
通过 $on(eventName, eventHandler) 侦听一个事件
通过 $once(eventName, eventHandler) 一次性侦听一个事件
通过 $off(eventName, eventHandler) 停止侦听一个事件
附官网详细地址：程序化事件侦听器
补充知识：vue在mounted中创建定时器与清除定时器
我就废话不多说了，大家还是直接看代码吧~
mounted(){
var that=this;
var num = 1;
var ss='';
var a=setInterval(()=>{
a+=10;
if(this num===100){
ss='success';
console.log(ss)
clearInterval(a) //当num等于100时清除定时器
}
}, 1000);
}
以上这篇Vue清除定时器setInterval优化方案分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue.config.js使用代理配置真实请求url方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了前端vue架构插槽slot使用教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-02-02
本文主要介绍了VUE+ElementUI下载文件的几种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了vue实现行列转换的一种方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue数据变化但页面刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目netWork地址无法访问的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要介绍了vue-cli3项目展示本地Markdown文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
完美解决vue 项目开发越久 node_modules包越大的问题
这篇文章主要介绍了vue 项目开发越久 node_modules包越大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
下面小编就为大家分享一篇在vue项目创建的后初始化首次使用stylus安装方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
vue.js的灵魂是组件，而组件的灵魂是插槽。借助于插槽，我们能最大程度上实现组件复用。本文主要是对插槽的实现机制进行详细概括总结，在某些场景中，有一定的用处2021-06-06
最新评论