I implemented a simple countdown timer using window.setInterval. It works perfectly in my desktop browser but it does not work correctly on my smartphone (Fairphone 2) as a PhoneGap/Cordova app. According to my examinations and my research on the internet the interval/timeout is interrupted when the phone is sent to sleep/standby. That's why it does not work.

Astonishingly the interval/timeout is not interrupted when my phone is connected via usb cable to my puter. So probably it's an energy-saving feature that's causing the bad behaviour.

So, I'm lost. I don't know how to implement my simple countdown timer which of course should also work when the phone sleeps (=display turned off). Is there an alternative for window.setInterval() / window.setTimeout() ?

Here is my simple code (as stated: window.setTimeout does not work, either):

...
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/libs/jquery.js"></script>
<script>
    var min = 25;
    $(document).ready(function(){
        intervalID = window.setInterval(function () {
            --min;
            if (min > 0) {
                $("#countdown").text(min);
            }
        }, 6000);
    });
</script>
...
<p id="countdown">0m</p>

I implemented a simple countdown timer using window.setInterval. It works perfectly in my desktop browser but it does not work correctly on my smartphone (Fairphone 2) as a PhoneGap/Cordova app. According to my examinations and my research on the internet the interval/timeout is interrupted when the phone is sent to sleep/standby. That's why it does not work.

Astonishingly the interval/timeout is not interrupted when my phone is connected via usb cable to my puter. So probably it's an energy-saving feature that's causing the bad behaviour.

So, I'm lost. I don't know how to implement my simple countdown timer which of course should also work when the phone sleeps (=display turned off). Is there an alternative for window.setInterval() / window.setTimeout() ?

Here is my simple code (as stated: window.setTimeout does not work, either):

...
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/libs/jquery.js"></script>
<script>
    var min = 25;
    $(document).ready(function(){
        intervalID = window.setInterval(function () {
            --min;
            if (min > 0) {
                $("#countdown").text(min);
            }
        }, 6000);
    });
</script>
...
<p id="countdown">0m</p>

• javascript
• cordova

• when you turn on display, setInterval starts working again? – juvian Commented Jan 27, 2016 at 19:20
• 1 "According to my examinations and my research on the internet the interval/timeout is interrupted when the phone is sent to sleep/standby." Yep. setInterval and setTimeout only guarantee a minimum delay. The browser can delay it all it wants beyond that mimum for precisely the reason you think: "So probably it's an energy-saving feature that's causing the bad behaviour." Rather than decrementing a counter, you need to know the start time and pare the current time against that. – James Thorpe Commented Jan 27, 2016 at 19:20
• @juvian Yes, it starts working again. But it does not help because I want to issue an alarm sound when the countdown finishes... – Falco Preiseni Commented Jan 27, 2016 at 19:25
• @JamesThorpe Thanks for the confirmations =) But the thing is, I want to issue an alarm sound as soon as the countdown finishes (whithout having to activate the display) – Falco Preiseni Commented Jan 27, 2016 at 19:27
• @FalcoPreiseni mmm I guess it doesn´t make sense to sound an alarm if the phone is standby mode, unless it´s an app and not a browser thing. Still, checking current time you can know how much time the interval has not been working and adjust your timer to that, and raise the alarm when screen goes on again if the time has already passed – juvian Commented Jan 27, 2016 at 19:29

2 Answers 2

Use the interval timer only for updating the display. Use the system time to decide what to display.

Then, if your interval doesn't get called when the display is not visible, this is no problem. The next time it does get called (when the display is turned on again), it will calculate the correct elapsed time from the system time and it will display correctly.

For this reason (and several others), you should never assume that setInterval() is going to keep perfect time. In Javascript, it just means you want to be called every once in a while and you get to set an approximate time to specify the frequency, but the interval may be shut off for long periods of time.

Get the time when your interval starts with Date.now() and then each time the interval fires, get the new system time and subtract from the start time to see how much time has elapsed and then calculate what you want to display.

If you want to show minutes remaining on a 25 minute timer, you could do this:

function showTimer(selector, minutes) {
  var startTime = Date.now();
  var interval;

  function showRemaining() {
    var delta = Date.now() - startTime;     // milliseconds
    var deltaMinutes = delta / (1000 * 60);
    if (deltaMinutes < minutes) {
      // display minutes remaining
      $(selector).text(Math.round(minutes - deltaMinutes));
    } else {
      $(selector).text(0);
      clearInterval(interval);
    }
  }

  interval = setInterval(showRemaining, 15 * 1000);
  showRemaining();
}

$(document).ready(function(){
  showTimer("#countdown", 25);
});

Working demo: https://jsfiddle/jfriend00/807z860p/

I found a cordova plugin which executes timeouts/intervals even when the display is turned off:

cordova-plugin-timers (on github)

The answer of jfriend00 was also helpful.