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 相关文章推荐
js 获取Listbox选择的值的代码
Apr 15 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
js正则表达式简单校验方法
Jan 03 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/04/15 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
基于jquery的3d效果实现代码
2011/03/23 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
js实现分割上传大文件
2016/03/09 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python字典get()方法用法分析
2015/04/17 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
司机岗位职责
2013/11/15 职场文书
行政部主管岗位职责
2013/12/28 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
工商局个人工作总结
2015/03/03 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫