vue项目开发中setTimeout等定时器的管理问题


Posted in Javascript onSeptember 13, 2018

一、问题来源。

在项目中,我们经常有这样的需求,一个页面初始化后,需要不断的去请求后端,来获取当前某个记录的最新状态。

显然,这个可以用setTimeout以及回调中继续setTimeout来实现。

我们假设定时器是在页面#/test/aaa上创建的。

但是,会遇到以下两个问题,我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb,定时器还在跑。

其次,如果我不断在#/test/aaa 和 #/test/bbb两个页面之间不断的切换,而且切换时间小于定时器的间隔时间时,也会出现

重复创建setTimeout的情况。

现在的问题就是,我们如何做到管理定时器。

二、示例代码。

created() {
  if ( this.timeOut ) {
    clearTimeout(this.timeOut);
  }
  this.getListIng();
},
computed: {
  timeOut: {
    set (val) {
      this.$store.state.timeout.compileTimeout = val;
    },
    get() {
      return this.$store.state.timeout.compileTimeout;
    }
  },
},
methods: {
  getListIng() {
    // 这里是一个http的异步请求
    if ( getUrlModule() == 'aaa' ) {
      let _this = this;
      this.timeOut = setTimeout(() => {
        _this.getListIng();
      }, 5000);
    } else {
      this.timeOut = '';
    }
  },
}

(1)如上面代码所示,当创建页面(created执行)时,会先判断变量this.timeOut是否存在,如果存在,先clearTimeout掉。

(2)而,this.timeOut这个变量对应的是全局store里的this.$store.state.timeout.compileTimeout。并且是双向绑定的,这个

请自行搜索vue2.0中computed用法。

 (3)在我们的主函数getListIng()中,会先使用函数getUrlModule()根据url判断当前页面是否是aaa页面,如果是的,就执行setTimeOut,

如果不是,就不行执行了,并且设置this.timeOut = '';

我们假设上面没有if ( getUrlModule() == 'aaa' ) 这句判断,会出现,当我们已经跳出了当前aaa页面,去了bbb页面并且一直停留在bbb页面时,

还有setTimeout在执行,就会不断有http的请求。

如果没有if ( this.timeOut ) { clearTimeout(this.timeOut); } 这句代码。当我们不断在2个页面之间切换时,且切换的频率很高。会出现多次创建

setTimeout的情况。这个逻辑稍微有点绕,请阅读者自行演算。

三、我们必须清楚的事实。

(1)vue中$store里创建的变量,其实是全局变量,这个变量在切换页面时不会清除,当我们刷新页面时会清除掉。

(2)在前端页面中,当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉。但是,切换页面(仅仅是路由切换)

是不会清除的。

(3)setTimeout、setinterval有本质的不同,前者只执行一次,除非你在回调中,不断的调用,而后者是不间断调用的。但是,我在各种实践中发现,

还是setTimeout好用。因为,setTimeout可以根据条件,及时在回调中停用。如果采用setinterval,我们很有可能捕捉不到停用的条件而无法停用。

补充:Vue之SetTimeout

1.前言

相信很多人都遇到过这样的问题,页面数据需要不断的刷新,也就是不断的发送ajax请求来更新数据,那么在vue中怎样做才比较好呢?这里介绍一下我踩的坑,以及解决方案

2.问题

settimeout用来调用请求数据,但是我遇到的问题就是,没有用合适的方式去关闭settimeout,出现了离开当前页面,请求还在不断的发送问题,这样给服务器带来了无必要的压力。附上之前的代码:

self.deployTimeOutId = setTimeout(() => {
              self.getDeployList(false);
            }, 5000);

说明:这一段代码是嵌在getDeployList方法中的,离开当前页面的是时候,必须要去手动的把这个settimeout清除才行。一般这个写在destoryed()这个钩子里。

window.clearTimeout(this.deployTimeOutId);

虽然这样处理了,但在逻辑比较复杂的情况下,还是出现了没有关闭的情况,而且排查起来很痛苦。下面介绍一种针对Vue比较好的做法。

3.解决方案

let self=this;
  if (self && !self._isDestroyed) {
            setTimeout(() => {
              if (self && !self._isDestroyed)
                self.getDeployList();
            }, 5000);
          }

_isDestroyed这个属性表示的是当前这个组件是否有被销毁,true表示当前的组件已经被销毁,通过上面这个判断,我们就不需要自己手动的去用ID来清除了,这个就相当于递归嘛,有了一个结束判断,避免了死循环咯~~

总结

以上所述是小编给大家介绍的vue项目开发中setTimeout等定时器的管理问题,希望对大家有所帮助,如果大家有任何疑问请

给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
vue请求数据的三种方式
Mar 04 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 #Javascript
详解webpack 热更新优化
Sep 13 #Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 #Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 #Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 #Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 #Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 #Javascript
You might like
PHP 数据库树的遍历方法
2009/02/06 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python调用飞书发送消息的示例
2020/11/10 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
十佳标兵事迹材料
2014/08/18 职场文书
质量保证书
2015/01/17 职场文书
雨花台导游词
2015/02/06 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
教师节校长致辞
2015/07/31 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript