解决h5页面手机息屏后定时器加快

鸭鸭很可爱

已于 2023-08-06 15:44:31 修改

阅读量183

点赞数 1

分类专栏： js vue 文章标签： javascript vue 前端

于 2023-08-06 15:34:45 首次发布

本文链接：https://blog.csdn.net/weixin_47922373/article/details/132131472

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

通过监听visibilitychange来判断页面是否可见，可见时重新获取数据
● 当document.visibilityState === 'hidden’的时候，清除定时器
● 当document.visibilityState === ‘visible’ 的时候，重新获取数据

链接
在这里插入图片描述

 mounted() {
 	  //倒计时 定时器
      this.timeDown();
      document.addEventListener("visibilitychange", ()=>{
        if(document.visibilityState === 'hidden'){
          // 页面进入屏幕息屏状态，停止定时器并记录剩余时间
          if(this.inter) clearInterval(this.inter);
          this.inter = null;
        }else if (document.visibilityState === 'visible' && this.inter === null) {
          // 页面恢复，重新启动定时器
          this.timeDown();
        }
      });

    },