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是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能，发现网上这方面的资料较少，所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要为大家详细介绍了Vue实现记事本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了vue组件之间数据传递的方法,结合实例形式分析了vue.js父组件与子组件之间数据传递相关操作技巧,需要的朋友可以参考下2019-02-02
本文主要介绍了vue+echarts5实现中国地图的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
今天小编就为大家分享一篇关于Vuex中的State使用介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
vue-cli4创建项目导入Element-UI踩过的坑及解决
这篇文章主要介绍了vue-cli4创建项目导入Element-UI踩过的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要给大家介绍了关于Vue引用echarts超详细步骤,vue中优雅的使用echarts在前端工作中,数据可视化用得最多的,可能就是图表了,需要的朋友可以参考下2023-08-08
vue提供了mixins、extends配置项，最近使用中发现很好用。下面小编通过本文给大家介绍下vue中 mixins和extends的巧妙用法，需要的朋友参考下吧2017-12-12
最新评论