Vue通过visibilitychange获取页面被放置后台的总时长，重新计算倒计时

最新推荐文章于 2024-04-13 15:50:45 发布

土豆有毒

最新推荐文章于 2024-04-13 15:50:45 发布

阅读量366

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43945408/article/details/127406345

版权


<script>
import moment from 'moment';

  data() {
     return {
      moment,
      timer: null,
      countdownVal: 300, // 倒计时总秒数为 5min * 60
      timeOut: undefined, // 页面切出时间
      timeIn: undefined, // 页面切入时间
      countdownValOut: 0, // 页面切出时，倒计时的当前时间
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
    document.removeEventListener('visibilitychange', this.handleVisibilitychange);
  },
  mounted() {
    document.addEventListener('visibilitychange', this.handleVisibilitychange);
  },
  created() {
    this.setCountdown();
  },
  methods: {
    setCountdown() {
      this.timer = setInterval(() => {
        this.countdownVal -= 1;
        // 五分钟结束之后，自动提交
        if (this.countdownVal === 0) {
          clearInterval(this.timer);
          this.submit();
        }
      }, 1000);
    },
    handleVisibilitychange(e) {
      if (e.target.visibilityState === 'visible') {
        this.timeIn = moment();
        // 如果曾经切出过页面，根据timeIn,timeOut,countdownValOut重新计算countdownVal
        if (this.timeOut) {
          // diffTime 即页面在后台的时间
          const diffTime = this.timeIn.diff(this.timeOut, 'second');
          const leftTime = this.countdownValOut - diffTime;
          if (leftTime > 0) {
            this.countdownVal = leftTime;
          } else {
            this.submit();
          }
        }
      } else if (e.target.visibilityState === 'hidden') {
        this.timeOut = moment();
        this.countdownValOut = this.countdownVal;
      }
    }
  }