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,//定时器定义变量
      }
    }

    }

    
    
  • 相关阅读:
    镇中7日做题小结 day2
    镇中7日做题小结 day1
    关于开通luogu博客
    bitset用法和ch2101可达性统计
    离散化 下标与数值的深入理解
    黄题 P2038 无线网络发射器选址 被坑之痛
    最蒟蒻bug,没有之一
    http://www.laomaotao.net/?H4068
    C++设计模式——简单工厂模式
    面向对象的七个基本设计原则
  • 原文地址:https://www.cnblogs.com/fmixue/p/11400812.html
Copyright © 2011-2022 走看看