Fork me on GitHub

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