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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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/01/19 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php实现的SESSION类
2014/12/02 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
javascript与Python快速排序实例对比
2015/08/10 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python处理document文档保留原样式
2019/09/23 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python实现拼图小游戏
2020/02/22 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
中文系学生自荐信范文
2013/11/13 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
推荐信格式范文
2014/05/09 职场文书
大学课外活动总结
2014/07/09 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android