大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroyed,可以判断出是否还在当前生命周期中,true为不在,false为还在;

今天要说的是在浏览器打开新窗口的情况下将上一页面的定时器清空;

代码如下:

export: {

methods: { 
/***
*定时器刷新接口
* */
  timeRefresh(){
if(this.isLeave) return false;
     //你所需要定时刷新请求的方法OR接口 5秒一刷新
  this.refreshData = window.setTimeout(this.timeRefresh, 5000);
  }
},
mounted() {

  this.timeRefresh();

  let self = this;

//此方法可以监听到浏览器切换页面,也就是离开当前页面时的动态;为了保险起见,建议在beforeDestroy中也清空定时器;
  document.addEventListener('visibilitychange',() => { //浏览器tab标签切换事件

    if(document.visibilityState == 'hidden') { //状态判断 没在当前页面呆着
           self.isLeave = true;
  if(self.refreshData) window.clearTimeout(self.refreshData); self.refreshData = null;
     }else { //回来了
 self.isLeave = false;
      self.refreshData = setTimeout(self.timeRefresh, ((new Date).getTime() % 5000));
 }
});
},
data() {
return {
    isLeave: false,//定义变量判断是否还停留在当前此页面中
    refreshData : null,//定时器定义变量
  }
}

}

												

vue中setTimeout切换浏览器页签时怎么清除解决方案的更多相关文章

  1. EBS OAF开发中怎样实现功能页签(Global Tab)

    EBS OAF开发中怎样实现功能页签(Global Tab) (版权声明.本人原创或者翻译的文章如需转载.如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 功能页签的实现不须要不论什么编码 ...

  2. JS强制关闭浏览器页签并且不提示关闭信息

    工作中很多奇葩的需求都会出现,现在就有一个问题,描述如下: 现在的登录跳转权限页面要去掉,集成在第三方系统信息上,当退出登录的时候需要关掉打开的Tab页面,因此考虑使用window.close()关闭 ...

  3. vue中input输入第一个字符时,光标会消失,需要再次点击才能输入

    vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...

  4. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

  5. vue中,对象数组多层嵌套时,更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  6. vue中使用iview表单验证时this指针问题

    需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...

  7. VUE中实现iview的图标效果时遇到的一个问题

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...

  8. 记一笔vue中的中央事件总线的问题,以及解决方案

    代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...

  9. vue中toggle切换的3种写法

    前言:查看下面代码,在任意编辑器中直接复制粘贴运行即可 1:非动态组件(全局注册2个组件,借用v-if指令和三元表达式) <!DOCTYPE html> <html> < ...

随机推荐

  1. PHP数据如何向上取整

    PHP数据如何向上取整? PHP数据向上取整可以通过ceil()函数来实现,ceil()函数表示向上舍入为最接近的整数. 语法是: 1 ceil(x) 参数 x 必需.一个数. 说明 返回不小于 x ...

  2. 【Elasticsearch】ElasticSearch基本查询

    学习elasticsearch查询用法的时候,发现这篇文章写得很详细,为以后方便查看,就直接搬过来了,原文链接在下面. 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附 ...

  3. LOJ 2719 「NOI2018」冒泡排序——模型转化

    题目:https://loj.ac/problem/2719 首先要发现合法的充要条件是 | LDS | <=2 ! 因为有没用的步数,说明一个元素先往左移.又往右移(不会先往右移再往左移,因为 ...

  4. 2018-2019-2 20175126谢文航 实验四《Android开发基础》实验报告

    一.实验封面 课程:Java程序设计 班级:1751 班 姓名:谢文航 学号:20175126 指导教师:娄嘉鹏 实验日期:2019年5月15日 实验时间:--- 实验序号:实验四 实验名称:Andr ...

  5. (转)maven怎么 引入(或引用/使用) 自定义(或本地/第三方) jar的三种方式 图文教程 方法二最简单

    转:https://blog.csdn.net/wabiaozia/article/details/52798194 准备工作: 假如我有一个自定义jar是:123456.jar,下载地址http:/ ...

  6. ACM中java的使用 (转)

    ACM中java的使用 这里指的java速成,只限于java语法,包括输入输出,运算处理,字符串和高精度的处理,进制之间的转换等,能解决OJ上的一些高精度题目. 1. 输入: 格式为:Scanner ...

  7. 信息安全-威胁防御系统-Fortinet:Fortinet

    ylbtech-信息安全-威胁防御系统-Fortinet:Fortinet Fortinet 是多层威胁防御系统的创新者和先锋.该系统能够为业务通信提供最佳安全.优秀性能和低总体占用成本. Forti ...

  8. English-Words with 'ir'

    hire thirty thirteen third sir birthday shirt stir circle dirty skirt affirm affirmation affirmable ...

  9. <读书笔记>JavaScript系列之7种创建对象(面向对象)

    写在前面: 以下三选一: 阅读博文JavaScript 对象详解. 阅读<JavaScript权威指南>第6章. 阅读<JavaScript高级程序设计>第6章. 注意:只需要 ...

  10. Selenium:多表单(frame/iframe)切换(Switch模块)

    frame标签有frameset.frame.iframe三种,frameset跟其他普通标签没有区别,不会影响到正常的定位,而frame与iframe需要切换进去才能定位到其中的元素 比如下面这个网 ...