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 相关文章推荐
Jquery 数组操作大全个人总结
Nov 13 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
BootStrap中的表单大全
Sep 07 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
详解原生js实现offset方法
Jun 15 Javascript
js实现随机点名小功能
Aug 17 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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 快速排序算法详解
2014/11/10 PHP
php图片上传类 附调用方法
2016/05/15 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP中“=>
2019/03/01 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python语法快速入门指南
2015/10/12 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
优秀团员自我评价
2015/03/10 职场文书
征求意见函
2015/06/05 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android