在页面中需要定时刷新局部数据,在数据变化是否频繁的情况下,没有必要使用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. SPOJ 1811LCS Longest Common Substring

    后缀自己主动机裸题.... Longest Common Substring Time Limit: 2000MS   Memory Limit: Unknown   64bit IO Format: ...

  2. 恩布企业IM PC端,服务端公布 1.16 版本号

    恩布企业IM PC端,服务端公布1.16版本号,开源企业IM.免费企业即时通讯软件:主要版本号更新内容: 恩布服务端核心程序,添加进程守护保护机制,确保系统7*24持续稳定服务: 服务端添加内存数据库 ...

  3. hdu1716(库函数next_permutation)

    题目意思: 现有四张卡片,用这四张卡片能排列出非常多不同的4位数,要求按从小到大的顺序输出这些4位数. 注意首位没有前导0 pid=1716">http://acm.hdu.edu.c ...

  4. 设计模式C++实现——组合模式

    模式定义: 组合模式同意你将对象组合成树形结构来表现"总体/部分"层次结构.组合能让客户以一致的方式处理个别对象以及对象组合. 这个模式可以创建一个树形结构,在同一个结构中处理嵌套 ...

  5. C++关键知识

    <精通MFC>第一章节整理复习 //c++编程技术要点 /* //1.虚函数及多态的实现 //演示多态技术 #include <iostream> using namespac ...

  6. oc08--局部变量,全局变量,函数方法的区别

    // // main.m // 局部变量和全局变量以及成员变量的区别 #import <Foundation/Foundation.h> @interface Person : NSObj ...

  7. TensorRT加速 ——NVIDIA终端AI芯片加速用,可以直接利用caffe或TensorFlow生成的模型来predict(inference)

    官网:https://developer.nvidia.com/tensorrt 作用:NVIDIA TensorRT™ is a high-performance deep learning inf ...

  8. 实现第三方登录(QQ、微信、微博)

    第三方登录,就是使用大家比较熟悉的比如QQ.微信.微博等第三方软件登录自己的网站,这可以免去注册账号.快速留住用户的目的,免去了相对复杂的注册流程.下边就给大家讲一下怎么使用PHP开发QQ登录的功能. ...

  9. ios网络模拟

    ios网络模拟 在ios开发和测试中,需要针对不同网络状况做一下测试优化,如果在真机上用真实网络的话,需要不同网络(2G.3G.4G)的手机卡,比较麻烦. 其实可以模拟不同网络状况,以下分别针对真机和 ...

  10. POJ 3620 DFS

    题意: 给你n*m的矩形,有k个坏点 问最大坏点连通块的坏点数. 一发水题.. 裸的DFS // by SiriusRen #include <cstdio> #include <a ...