在页面中需要定时刷新局部数据,在数据变化是否频繁的情况下,没有必要使用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. MEAN框架学习笔记

    MEAN框架学习笔记 MEAN开发框架的资料非常少.基本的资料还是来自于learn.mean.io站点上的介绍. 于是抱着一种零基础学习的心态,在了解的过程中,通过翻译加上理解将MEAN框架一点点消化 ...

  2. IP地址的规划和设计方法(三)

    九,内部网络专用IP地址规划与网络地址转换NAT方法 (1)内部网络的专用IP地址选择的根据 RFC1918在讨论内部网络的专用IP地址规划方法时任务.使用专用地址规划一个内部网络地址系统时.首选的方 ...

  3. 【solr基础教程之中的一个】Solr相关知识点串讲

           Solr是Apache Lucene的一个子项目.Lucene为全文搜索功能提供了完备的API.但它仅仅作为一个API库存在.而不能直接用于搜索. 因此,Solr基于Lucene构建了一 ...

  4. element-UI中table表格的row-click事件怎么获取一行数据的id

    <el-table :data="tableData" style="width: 100%" @row-click="openDetails( ...

  5. CodeForces--621A--Wet Shark and Odd and Even(数学水题)

    Wet Shark and Odd and Even Time Limit: 2000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & ...

  6. 【POJ 2976】 Dropping Tests

    [题目链接] http://poj.org/problem?id=2976 [算法] 0/1分数规划 [代码] #include <algorithm> #include <bits ...

  7. Spring进行表单验证

    转自:https://www.tianmaying.com/tutorial/spring-form-validation 开发环境 IDE+Java环境(JDK 1.7或以上版本) Maven 3. ...

  8. Python金融量化

    Python股票数据分析 最近在学习基于python的股票数据分析,其中主要用到了tushare和seaborn.tushare是一款财经类数据接口包,国内的股票数据还是比较全的 官网地址:http: ...

  9. SQL查询中选取某个字段的前几个字符的方法

    在统计某种数据名称是否存在规律时,可以通过group by进行统计,但是有时候存在钱几个字符相同,后面字符不同的情形.这样可以通过按照前几个字符串进行统计,SqlServer和Oracle中都可以使用 ...

  10. 控件——DataGridview

    控件:DataGridview    用来显示数据,      可以显示和编辑来自多种不同类型的数据源的表格数据. 一.两种显示数据的方式:手动,后台代码 主要通过后台代码:先建立三大类   然后绑定 ...