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 相关文章推荐
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
JS性能优化实现方法及优点进行
Aug 30 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
图书管理程序(二)
2006/10/09 PHP
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python MD5文件生成码
2009/01/12 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
scrapy-splash简单使用详解
2021/02/21 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
.net软件工程师面试题
2015/03/31 面试题
户外活动策划方案
2014/03/12 职场文书
服务承诺书范文
2014/05/19 职场文书
最感人的道歉情书
2015/05/12 职场文书
城南旧事电影观后感
2015/06/16 职场文书
2016年寒假见闻
2015/10/10 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
新手入门Mysql--概念
2021/06/18 MySQL
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技