在页面中需要定时刷新局部数据,在数据变化是否频繁的情况下,没有必要使用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. SWT中嵌入Swing的JTextFeild却不能编辑

    SWT中嵌入Swing的JTextFeild却不能编辑 学习了:http://www.iteye.com/problems/49487   膜拜一下 org 竟然有这样的坑,需要在中间添加一个JApp ...

  2. 使用Python生成源文件的两种方法

    利用Python的字符串处理模块,开发者能够编写脚本用来生成那些格式同样的C.C++.JAVA源程序.头文件和測试文件,从而避免大量的反复工作. 本文概述两种利用Python string类生成jav ...

  3. MySQL数据库表的数据插入、修改、删除、查询操作及实例应用

    一.MySQL数据库表的数据插入.修改.删除和查询 CREATE DATABASE db0504; USE db0504; CREATE TABLE student ( sno ) NOT NULL ...

  4. session理解

    Session,底层的实现就是一个Map<集合>,有些Data在Server内存中,APP要分层.Data在各个层之间肯定要以一种形态传递(泛型),之前Servlet dao.getLis ...

  5. 获取android的SDK或者手机目录路径

    获取android的SDK或者手机目录路径 Google为我们提供了API来获取SDK或者手机目录路径: 1.获取SD卡目录 File file1 = Environment.getExternalS ...

  6. ES 断路器——本质上保护OOM提前抛出异常而已

    监控fielddata使用了多少内存以及是否有数据被驱逐是非常重要的.大量的数据被驱逐会导致严重的资源问题以及不好的性能. Fielddata使用可以通过下面的方式来监控: 对于单个索引使用 {ref ...

  7. P4396 [AHOI2013]作业 分块+莫队

    这个题正解是莫队+树状数组,但是我个人非常不喜欢树状数组这种东西,所以决定用分块来水这个题.直接在莫队维护信息的时候,维护单点同时维护块内信息就行了. 莫队就是这几行核心代码: void add(in ...

  8. 南海区行政审批管理系统接口规范v0.3(规划)4.1.【queryAcceptById】业务明细查询

    加密前:{"time":"1510061005493","username":"GH_DATA_EXCHANGE",&q ...

  9. day63-webservice 08.在web项目中配置带有接口的webservice服务

    这个是配置带有接口的WebService的服务. http://localhost:8080/cxf-web-server/service 带有接口的实现类也给它做好了.jaxws:endpoint是 ...

  10. 数组、链表、栈、队列和STL

    数组 数组是一种最基本的数据结构,它是内存上的一块连续存储空间.正因如此数组的随机访问很方便.但数组也有其固有的限制,大小分配后不能改变. STL中的数组 STL中的Array是静态数组模板,就是我们 ...