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

本文链接：https://blog.youkuaiyun.com/weixin_43945408/article/details/127406345

本文介绍了一个JavaScript实现的倒计时功能，当网页从隐藏变为可见时，会根据页面切出和切回的时间调整剩余倒计时。核心在于利用`visibilitychange`事件监控页面可见状态，并在页面离开视野时保存剩余时间，返回时进行计时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<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;
      }
    }
  }