Vue清除定时器setInterval优化方案分享


Posted in Javascript onJuly 21, 2020

两种方案清除定时器,开发者经常使用方案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优化方案分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 #Javascript
JavaScript undefined及null区别实例解析
Jul 21 #Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 #Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 #Javascript
vue 实现tab切换保持数据状态
Jul 21 #Javascript
vue通过过滤器实现数据格式化
Jul 20 #Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 #Javascript
You might like
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
document.write的几点使用心得
2014/05/14 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python中标准模块importlib详解
2017/04/16 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Django如何实现上传图片功能
2019/08/16 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Python的logging模块基本用法
2020/12/24 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
认购协议书范本
2014/04/22 职场文书
公司年终奖分配方案
2014/06/16 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL