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

    }

    
    
  • 相关阅读:
    Android编译系统
    Android指针管理:RefBase,SP,WP
    Android图片异步加载
    Android动画学习笔记Android Animation
    触发checkbox的click事件时遇到的问题
    C++ Primer笔记
    Android自定义对话框(Dialog)位置,大小
    android startService流程梳理笔记
    自定义SimpleAdapter
    Android Touch事件
  • 原文地址:https://www.cnblogs.com/fmixue/p/11400812.html
Copyright © 2011-2022 走看看