H5切换后台导致倒计时不准确，两个解决方法（1、visibilitychange、2、和客户端配合）

需求：

1、H5嵌入app，倒计时当前月剩余时间。

2、当前时间用后端返回的时间，不能使用手机系统时间，怕用户修改系统时间。

遇到的问题：app切换后台后，倒计时暂停，导致时间与实际不符。

1、visibilitychange

        visibilitychange - Web API 接口参考 | MDN

<div class="countDown">
      <img src="./images/title_icon.png" alt="">
      <p class="countDown-tisp">当期活动剩余时间</p>
      <p class="timeview"><span>{{timeleftd}}</span>天<span>{{timelefth}}</span>:<span>{{timeleftm}}</span>:<span>{{timelefts}}</span></p>
 </div>

   data () {
      return {
        deadLine:'',
        copytime:'',
        timeleftd :'*',
        timelefth :'*',
        timeleftm :'*',
        timelefts :'*',

      };
    },

    mounted() {
      let _this = this;
      //切后台，回调
      document.addEventListener("visibilitychange", function() {
        if (document.visibilityState === 'visible') {
          _this.getweekStarRank();
        } else {
          // 切出
        }
      });
     },

    watch: {
      copytime(newVal,oldVal){
        clearInterval(this.Cumulativetime); //关闭
        this.setIntervaltime();//开启定时器
      },
    },

methods: {
  //定时器
  setIntervaltime(){
      let thar = this;
      this.Cumulativetime = setInterval (function () {
          thar.showtimes();
      }, 1000);
   },
   showtimes() {
       let thar = this;
       let nowtime = new Date(thar.copytime);  //接口返回时间
       let endtime = new Date(nowtime.getFullYear(),nowtime.getMonth()+1,1);//下个月第一天
       let lefttime = endtime - thar.deadLine,  //距离结束时间的毫秒数
       leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
       lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
       leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
       lefts = Math.floor(lefttime/1000%60);  //计算秒数
       if(lefttime<0){
          clearInterval(thar.Cumulativetime);
          this.getweekStarRank()
          return;
        }
        thar.deadLine = (thar.deadLine + 1000);
        lefts.toString().length==1 && (lefts = '0'+lefts)
        leftm.toString().length==1 && (leftm = '0'+leftm)
        lefth.toString().length==1 && (lefth = '0'+lefth)
        this.timeleftd = leftd;
        this.timelefth = lefth;
        this.timeleftm = leftm;
        this.timelefts = lefts;
    },
    // 获取后端返回时间
    getweekStarRank() {
        const params = {
          subType: 8, // 【1：日榜；2：周榜；3：总榜；8：月榜】
          uid: this.info.uid,
          page: 1,
          pageSize: 10,
        }
        this.$http.get(this.$api.GET_ACT_fAMILY_RANK, params, {
          config: {
            headers: {
                pub_ticket: this.info.ticket,
            }
          }
        }).then((res) => {
          this.copytime = res.timestamp;//后端返回时间,watch监听
          this.deadLine = this.copytime;//deadLine 累计时间
        })
    },
},

2、和客户端配合（在window下声明一个方法给客户端调）

mounted(){
    // 将AppInteraction方法绑定到window下面，提供给原生调用
    //(方法名AppInteraction是和原生定义好的，客户端每次从后台切进来，会主动调用window下的该方法)
     window['AppInteraction'] = () => {
        this.AppInteraction();//methods
     }
},

methods:{
    //原生调用scanResult方法后执行getScanVal方法，获取到val
    AppInteraction(){
        this.getweekStarRank();//调用接口，更新时间
    },
}

虽然第一种方法我目前在移动端还没测出兼容问题，但是还是建议使用第二种解决方法，毕竟使用第二种，我们前端不用背锅...