javascript - angular 4 setinterval 在切换选项卡时暂停

Question

我的 setInterval 计时器在离开选项卡时暂停并在切换回选项卡时恢复 我想要解决方案使其在切换回选项卡时继续计数

这里是 GIF 图片显示发生了什么

这是我的代码:

  startCountDown(time) {
    clearInterval(this.countDownInterval);
    this.timeLeft = time * 100;
    if (time === 0) {
      return;
    }

    this.countDownInterval = setInterval(() => {
      this.timeLeft -= 1;
      if (this.timeLeft === 0) {
        clearInterval(this.countDownInterval);
      }
    }, 10);
  }
  updateTimer() {
    if (this.timeLeft > 0) {
      $('.rolling').fadeIn(200);
      $('.rolling-inner').html('<div>' + (this.timeLeft / 100).toFixed(2).replace('.', ':') + '</div>');
    } else {
      $('.rolling').fadeOut(200);
    }
  }
  set timeLeft(x) {
    this._timeLeft = x;
    this.updateTimer();
  }
  get timeLeft() {
    return this._timeLeft;
  }

Answer 1

setinterval 没有异常，这是它的属性。但是您可以跟踪选项卡选择操作并将挂起的空闲持续时间与现有时间相加。

这是跟踪选项卡选择和模糊的代码

$(window).on("blur focus", function(e) { 
    var prevType = $(this).data("prevType"); 

    if (prevType != e.type) { 
        switch (e.type) { 
            case "blur": break; 
            case "focus":  break; 
        } 
    } 

    $(this).data("prevType", e.type); 
})