vue 如何清除定时器
在页面中需要定时刷新局部数据,在数据变化是否频繁的情况下,没有必要使用webSocket,因为数据变化频繁,数据实时变化太快看不清楚。因此页面会定时调用后台接口以达到实时刷新数据的效果。
1、在data中定义一个定时器变量,timer
2、在mounted中把定时器的复制为timer
3、页面离开时,在destroyed中清除定时器已经timer
data() {
return {
timer:null, //定时器名称
}
},
created() {
this.getHangTotal();
},
mounted() {
this.timer = setInterval(
this.getHangTotal,
);
},
destroyed(){
clearInterval(this.timer); // 清除定时器
this.timer = null;
},
methods: {
getHangTotal(){
//…………
}
}
vue 如何清除定时器的更多相关文章
- vue+js清除定时器
注意data数据里面一定要定义Timeout Timeout:Function,//定时器 methods里面 moseovefalse(){//需要执行的方法 var that=this; that ...
- vue中清除定时器
1.data中定义 timer:90,timeName:null 点击支付则倒计时按钮出来 pay(){ this.timeName= setInterval(()=>{ this.timer- ...
- 清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题
2019-03更新 找到了更简单的方法,以setinterval为例,各位自行参考 mounted() { const that = this const timer = setInterval(fu ...
- 在vue组件中设置定时器和清除定时器
由于项目中难免会碰到需要实时刷新,无论是获取短信码,还是在支付完成后轮询获取当前最新支付状态,这时就需要用到定时器.但是,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要 ...
- Vue中在组件销毁时清除定时器(setInterval)
在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器 <template> <div class="about" ...
- vue中使用定时器时this指向
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
- angualrJs清除定时器
angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里 ...
- setTimeout和setInterval实现滚动轮播中,清除定时器的思考
PS:希望各路大神能够指点 setTimeout(function,time):单位时间内执行一次函数function,以后不执行:对应清除定时器方法为clearTimeout; setInterva ...
- vue组件里定时器销毁问题
我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样是非常消耗性能的.如下图所示: 解决方法1: 首先我在data函数里面进行定义定时器名称: data( ...
随机推荐
- ul,li不能左右居中的问题
近期帮朋友做一个他们公司的商品站点,用到了曾经学到的html+css技术,当然做站点少不了Javascript和jquery这些..... 这个功能主要实现了导航条里面的条目是居中的.所以声明了ul, ...
- 关于Dos窗体的设置
1.输入cmd,点击回车键.出现下图: 2.点击左上角(红框框起来的地方),进行例如以下图操作: 3.选择"属性",出现下图: 4.选择"字体"能够改动字体的大 ...
- Android Internet - WebView 的使用
WebView是Android 提供的操作网页的一个组件. 用于浏览网页及其它Internet资源. 这里总结了一些WebView 的经常使用接口.和2个小演示样例程序用于自己开发时直接使用.就不用再 ...
- 【转】HDFS读写流程
概述开始之前先看看其基本属性,HDFS(Hadoop Distributed File System)是GFS的开源实现. 特点如下: 能够运行在廉价机器上,硬件出错常态,需要具备高容错性流式数据访问 ...
- Sinowal Bootkit 分析-中国红客网络技术联盟 - Powered by Discuz!
訪问原文 (一)模块组成 感染过Sinowal的电脑,Sinaowal在硬盘中的分布例如以下图: ; Sector Offset ...
- /proc/sysrq-trigger说明【转】
本文转载自:http://blog.csdn.net/silenttung/article/details/8084136 版权声明:本文为博主原创文章,未经博主允许不得转载. /proc/sysrq ...
- [源码管理] ubuntu中svn简明用法:服务器搭建+客户端使用
本文是对网络上前人的优秀文章加以实践验证后所整理(修正或补充) 第一部分:svn服务器搭建(主要是四步走) 参考:http://www.son1c.cn/show/920.html 一,安装Subve ...
- .NET前后台-JS获取/设置iframe内对象元素并进行数据处理
转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...
- 二次排序问题(分别使用Hadoop和Spark实现)
不多说,直接上干货! 这篇博客里的算法部分的内容来自<数据算法:Hadoop/Spark大数据处理技巧>一书,不过书中的代码虽然思路正确,但是代码不完整,并且只有java部分的编程,我在它 ...
- hdu2647 Reward 拓扑排序
此题的关键在于分层次,最低一层的人的奖金是888,第二层是888+1 …… 分层可以这样实现.建立反向图.在拓扑排序的时候,第一批入度为0的点就处于第一层,第二批处于第二层 …… 由于是逐个遍历入度为 ...