美文网首页
H5息屏 或者至后台 倒计时停止 导致倒计时断层

H5息屏 或者至后台 倒计时停止 导致倒计时断层

作者: 真是个非常帅气的昵称呢 | 来源:发表于2019-10-10 16:38 被阅读0次

    监听页面显示或隐藏,重新显示的时候,重新请求数据

      mounted() {
        const _this = this
        handleTk(function () {
          _this.getCouponInfo()
        }, true)
      
       document.addEventListener("visibilitychange", _this.checkViChange); 
    
    
      },
      methods: {
        checkViChange() {//解决页面进入后台 倒计时断层
           if (!document.hidden) {
             console.log('页面挂起', '')
              this.getCouponInfo();   //重新调用getCouponInfo 方法去请求数据
           }
        },
      }
    

    或者倒计时的方法换一种,每次setInterval的时候,都去new Date,不要使用自减的方式

        count(sec) {
          var now = new Date().getTime();
          var end = new Date(now + sec).getTime();
          var _this = this;
          _this.timeCountFun = setInterval(function () {
            var _sec = Math.floor((end - new Date().getTime()) / 1000);
            if (_sec <= 0) {
              clearInterval(_this.timeCountFun);
            } else {
              const h = Math.floor((_sec / 60 / 60) % 24);
              const m = Math.floor((_sec / 60) % 60);
              const s = Math.floor(_sec % 60);
              _this.time.h = h > 9 ? h : "0" + h;
              _this.time.m = m > 9 ? m : "0" + m;
              _this.time.s = s > 9 ? s : "0" + s;
              console.log(_this.time.s)
            }
          }, 1000);
        },
    

    相关文章

      网友评论

          本文标题:H5息屏 或者至后台 倒计时停止 导致倒计时断层

          本文链接:https://www.haomeiwen.com/subject/ddjapctx.html