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

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

代码如下:

export: {

  1. methods: { 
  1. /***
    *定时器刷新接口
    * */
      timeRefresh(){
    if(this.isLeave) return false;
  1.   //你所需要定时刷新请求的方法OR接口 5秒一刷新
      this.refreshData = window.setTimeout(this.timeRefresh, 5000);
      }
  1. },
  1. mounted() {
  2.  
  3.   this.timeRefresh();
  4.  
  5.   let self = this;
  6.  
  7. //此方法可以监听到浏览器切换页面,也就是离开当前页面时的动态;为了保险起见,建议在beforeDestroy中也清空定时器;
  1.   document.addEventListener('visibilitychange',() => { //浏览器tab标签切换事件
  2.     if(document.visibilityState == 'hidden') { //状态判断 没在当前页面呆着
  1.   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));
     }
    });
    },
  1. data() {
    return {
        isLeave: false,//定义变量判断是否还停留在当前此页面中
  1.     refreshData : null,//定时器定义变量
  1.   }
    }

}

  1.  

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. 4412 SPI驱动

    1.Linux主机驱动和外设驱动分离思想(I2C驱动里有) SPI驱动总线架构:SPI核心层(x),SPI控制器驱动层(x),SPI设备驱动层(√).前面两个设备驱动搞明白了可以去看 2.教程中介绍: ...

  2. C# 调用windows时间同步服务获取准确时间

    //创建一个Daytime类代码如下:using System; using System.Collections; using System.Collections.Generic; using S ...

  3. express中 使用session与cookie

    1.express如何使用session与cookie : https://www.jianshu.com/p/1839e482274e  或  https://www.cnblogs.com/chy ...

  4. 多列布局(column)

    容器的属性 column-width: auto | < length > .给列定义一个最小宽度(min-width). auto: 列宽由其他元素决定. length: 显式设置最小宽 ...

  5. JDK1.8中ArrayList的实现原理及源码分析

    一.概述 ArrayList是Java开发中使用比较频繁的一个类,通过对源码的解读,可以了解ArrayList的内部结构以及实现方法,清楚它的优缺点,以便我们在编程时灵活运用. 二.源码分析 2.1 ...

  6. js俩习题

    需求,现在要求两个按钮,点击1,背景为红色,点击2,背景为黄色 *****html代码——————————————————————————————————————————————————<!DO ...

  7. linux设备驱动第一篇:设备驱动程序简介

    首先,我们知道驱动是内核的一部分,那么驱动在内核中到底扮演了什么角色呢? 设备驱动程序在内核中的角色:他们是一个个独立的“黑盒子”,使某个特定的硬件响应一个定义良好的内部编程接口,这些接口完全隐藏了设 ...

  8. 转 mysql 远程连接数据库的二种方法

    mysql 远程连接数据库的二种方法   一.连接远程数据库: 1.显示密码 如:MySQL 连接远程数据库(192.168.5.116),端口“3306”,用户名为“root”,密码“123456” ...

  9. MYSQL 查询脚本优化

    业务需要,优化一段多表查询脚本. 总结下来,采取以下步骤. 分析语句 分析语句,了解逻辑,是否可以先优化逻辑. 查询语句的查询范围,是否是全表查询,如果是,尽量优化为按索引查询. 查看语句数量,是否有 ...

  10. AJAX 步骤分析

    HTML 步骤: 1. 创建异步对象 2. 设置请求行 3. 设置请求头(get请求可以省略) 4. 注册状态改变事件 4.1. 判断状态&请求是否成功并使用数据   5. 发送请求   PH ...