zoukankan      html  css  js  c++  java
  • vue中setTimeout切换浏览器页签时怎么清除解决方案

    大家都知道,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,//定时器定义变量
      }
    }

    }

    
    
  • 相关阅读:
    mybatis框架-用类映射返回结果
    ArrayLLis 线程不安 实验
    快速求幂运算笔记
    nyoj 56 阶乘中素数的个数
    求正整数n所有可能的和式的组合(如;4=1+1+1+1、1+1+2、1+3、2+1+1、2+2
    synchronize学习
    nyoj 找球号三(除了一个数个数为基数,其他为偶数,编程之美上的)
    递归判断一个数是否递增
    快速排序c++
    x&-x
  • 原文地址:https://www.cnblogs.com/fmixue/p/11400812.html
Copyright © 2011-2022 走看看