美文网首页
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