angular 4 setinterval pausing when switch tab

Question

My setInterval timer is pausing when leave the tab and resume when switch back to the tab I want solution to make it keep counting when the tab is switched back

here is GIF picture shows what happen

here is my code:

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

Are you talking about the browser tab or a tab in the client? — NotARobot, Aug 24 '17 at 17:22
Fixed check the accepted answer to this question https://stackoverflow.com/questions/6585112/ — Ameer Fakhri, Aug 24 '17 at 17:34
I was about to say.. https://stackoverflow.com/questions/15871942/how-do-browsers-pause-change-javascript-when-tab-or-window-is-not-active — NotARobot, Aug 24 '17 at 17:35
is there anyway to prevent that from happen ? without change the browser config — Ameer Fakhri, Aug 24 '17 at 17:44

score 2 · Answer 1 · edited Aug 24 '17 at 18:06

2

Setinterval is not misbehaving , This is what it's property . But you can track the tab selection action and add the pending idle duration with existing time.

This is the code to track the tab selection and blur

$(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); 
})

edited Aug 24 '17 at 18:06

Lansana Camara

9,497
11
47
87

answered Aug 24 '17 at 18:02

Raja Mohamed

1,026
9
22

Yeah this can be used as solution but now I will use the realtime counting – Ameer Fakhri Aug 24 '17 at 18:07

angular 4 setinterval pausing when switch tab

1 Answers1