在页面中需要定时刷新局部数据,在数据变化是否频繁的情况下,没有必要使用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 如何清除定时器的更多相关文章

  1. vue+js清除定时器

    注意data数据里面一定要定义Timeout Timeout:Function,//定时器 methods里面 moseovefalse(){//需要执行的方法 var that=this; that ...

  2. vue中清除定时器

    1.data中定义 timer:90,timeName:null 点击支付则倒计时按钮出来 pay(){ this.timeName= setInterval(()=>{ this.timer- ...

  3. 清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题

    2019-03更新 找到了更简单的方法,以setinterval为例,各位自行参考 mounted() { const that = this const timer = setInterval(fu ...

  4. 在vue组件中设置定时器和清除定时器

    由于项目中难免会碰到需要实时刷新,无论是获取短信码,还是在支付完成后轮询获取当前最新支付状态,这时就需要用到定时器.但是,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要 ...

  5. Vue中在组件销毁时清除定时器(setInterval)

    在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器 <template> <div class="about" ...

  6. vue中使用定时器时this指向

    箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁.   箭头函数: let timerOne = s ...

  7. angualrJs清除定时器

    angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里 ...

  8. setTimeout和setInterval实现滚动轮播中,清除定时器的思考

    PS:希望各路大神能够指点 setTimeout(function,time):单位时间内执行一次函数function,以后不执行:对应清除定时器方法为clearTimeout; setInterva ...

  9. vue组件里定时器销毁问题

    我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样是非常消耗性能的.如下图所示: 解决方法1: 首先我在data函数里面进行定义定时器名称: data( ...

随机推荐

  1. ul,li不能左右居中的问题

    近期帮朋友做一个他们公司的商品站点,用到了曾经学到的html+css技术,当然做站点少不了Javascript和jquery这些..... 这个功能主要实现了导航条里面的条目是居中的.所以声明了ul, ...

  2. 关于Dos窗体的设置

    1.输入cmd,点击回车键.出现下图: 2.点击左上角(红框框起来的地方),进行例如以下图操作: 3.选择"属性",出现下图: 4.选择"字体"能够改动字体的大 ...

  3. Android Internet - WebView 的使用

    WebView是Android 提供的操作网页的一个组件. 用于浏览网页及其它Internet资源. 这里总结了一些WebView 的经常使用接口.和2个小演示样例程序用于自己开发时直接使用.就不用再 ...

  4. 【转】HDFS读写流程

    概述开始之前先看看其基本属性,HDFS(Hadoop Distributed File System)是GFS的开源实现. 特点如下: 能够运行在廉价机器上,硬件出错常态,需要具备高容错性流式数据访问 ...

  5. Sinowal Bootkit 分析-中国红客网络技术联盟 - Powered by Discuz!

    訪问原文 (一)模块组成         感染过Sinowal的电脑,Sinaowal在硬盘中的分布例如以下图: ; Sector                 Offset             ...

  6. /proc/sysrq-trigger说明【转】

    本文转载自:http://blog.csdn.net/silenttung/article/details/8084136 版权声明:本文为博主原创文章,未经博主允许不得转载. /proc/sysrq ...

  7. [源码管理] ubuntu中svn简明用法:服务器搭建+客户端使用

    本文是对网络上前人的优秀文章加以实践验证后所整理(修正或补充) 第一部分:svn服务器搭建(主要是四步走) 参考:http://www.son1c.cn/show/920.html 一,安装Subve ...

  8. .NET前后台-JS获取/设置iframe内对象元素并进行数据处理

    转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...

  9. 二次排序问题(分别使用Hadoop和Spark实现)

    不多说,直接上干货! 这篇博客里的算法部分的内容来自<数据算法:Hadoop/Spark大数据处理技巧>一书,不过书中的代码虽然思路正确,但是代码不完整,并且只有java部分的编程,我在它 ...

  10. hdu2647 Reward 拓扑排序

    此题的关键在于分层次,最低一层的人的奖金是888,第二层是888+1 …… 分层可以这样实现.建立反向图.在拓扑排序的时候,第一批入度为0的点就处于第一层,第二批处于第二层 …… 由于是逐个遍历入度为 ...