Reverse Countdown timer when browser minimize

Question

I am creating project using JavaScript. I have created a reverse timer in seconds. When the timer reaches zero then it will call some function.

This timer is working fine, but when the browser goes into sleep mode or is minimized then the timer is resume

setTimeout(() => {
  var counter = 60
  let updatedMsg;
  
  this.timer = setInterval(() => {
    counter--;
    if (counter == 0) {
      this.processLogout();
      clearInterval(this.timer);
    }
    console.log(counter)
    
    updatedMsg = message.replace("{0}", counter);
    messageRef.dialogRef.componentInstance.config.message = updatedMsg;
  }, 1000);
}, 500);

The issue is because it's entirely down to the browser whether it continues processing JS while the window is out of focus/minimised. As such, the timer will simply stop working. A possible workaround for this would be to instead calculate the Date when the timer should end, and in each tick of the interval re-calculate the delta to that end date and display it. This obviously depends on your exact use case, though. — Rory McCrossan, Sep 10 '21 at 08:45
@RoryMcCrossan : Thanks for the reply, i need to display the countdown timer as well, but could not find with datetime — Karan, Sep 10 '21 at 08:47
You can store the timer variables in localstorage and check the variable with each setinterval iteration. You can check this [answer on SO](https://stackoverflow.com/questions/69042323/how-to-prevent-stopwatch-not-to-reset-on-page-refresh/69044003?noredirect=1#comment122033236_69044003) — Rüzgar, Sep 10 '21 at 09:11
@Karan, what about [visibltychange event](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event)? — Bataklik, Sep 10 '21 at 09:12

score 0 · Answer 1 · answered Sep 10 '21 at 11:54

Below is the working solutions:

var startTime = new Date()
startTime.setTime(startTime.getTime() + 1000 * 120);
startTime = Math.floor(startTime / 1000);
function startTimeCounter() {
    var now = Math.floor(Date.now() / 1000); 

    var diff = startTime - now ; 
    var s = Math.floor(diff); 
    console.log(s)  
   
}
setInterval(() => {
  startTimeCounter()
}, 1000);

3limin4t0r · Answer 2 · 2021-09-10T13:06:57.370

Instead of using a value that you increment/decrement when a callback is called, you should calculate when your countdown should finish. Then compare the current time against this target.

const MILLISECOND = 1;
const SECOND = 1000*MILLISECOND;
const MINUTE = 60*SECOND;

const finishAt = Date.now() + 1*MINUTE;
const intervalID = setInterval(() => {
  const now = Date.now();
  if (now < finishAt) {
    // code that is executed at a 1 second interval (if the browser is active)
    const msToGo = finishAt - now;
    const secToGo = Math.floor(msToGo / SECOND);

    console.log(secToGo);
  } else {
    clearInterval(intervalID);

    // code to be executed when your timer finishes
    console.log("done");
  }
}, 1*SECOND);

const MILLISECOND = 1;
const SECOND = 1000*MILLISECOND;
const MINUTE = 60*SECOND;

const finishAt = Date.now() + 10*SECOND;
const intervalID = setInterval(() => {
  const now = Date.now();
  if (now < finishAt) {
    // code that is executed at a 1 second interval (if the browser is active)
    const msToGo = finishAt - now;
    const secToGo = Math.floor(msToGo / SECOND);

    console.log(secToGo);
  } else {
    clearInterval(intervalID);

    // code to be executed when your timer finishes
    console.log("done");
  }
}, 1*SECOND);

Another option would be to create 2 callbacks. One that has a 1 second interval that executes some code at a specific interval. The other callback is a timeout that stops the interval.

const duration = 1*MINUTE;
const finishAt = Date.now() + duration;
const intervalID = setInterval(() => {
  // code that is executed at a 1 second interval (if the browser is active)
  const msToGo = finishAt - Date.now();
  const secToGo = Math.floor(msToGo / SECOND);

  console.log(secToGo);
}, 1*SECOND);

setTimeout(() => {
  clearInterval(intervalID);
  
  // code to be executed when your timer finishes
  console.log("done");
}, duration);

const MILLISECOND = 1;
const SECOND = 1000*MILLISECOND;
const MINUTE = 60*SECOND;

const duration = 10*SECOND;
const finishAt = Date.now() + duration;
const intervalID = setInterval(() => {
  // code that is executed at a 1 second interval (if the browser is active)
  const msToGo = finishAt - Date.now();
  const secToGo = Math.floor(msToGo / SECOND);

  console.log(secToGo);
}, 1*SECOND);

setTimeout(() => {
  clearInterval(intervalID);
  
  // code to be executed when your timer finishes
  console.log("done");
}, duration);

This second solution might drop an interval if the setTimeout() callback is executed before the final setInterval() tick. But in most scenarios this should not be an issue.

Reverse Countdown timer when browser minimize

2 Answers2