Forum Discussion

ChristinaClark-'s avatar
ChristinaClark-
Community Member
2 months ago

Javascript countdown timer stops when tab minimized

I have several Storyline projects that use a countdown timer to ensure certain activities are completed in a certain time. In some browsers, the timer stops when the browser tab or window is minimized or not in focus (something to do with browser throttling???)

I use the following code (built from Matthew Bibby's excellent but sadly defunct website):

function zeros(i) {
if (i < 10) {
    i = "0" + i;
}
return i;
}
var minutes, seconds, timer, totalTime;
var counter = setInterval(timer, 1000);
var fin="Done";
var player = GetPlayer();
var count = player.GetVar("Countdown_Duration");
function timer() {
    count = count - 1;
    minutes = zeros(Math.floor(count / 60));
    seconds = zeros(count - minutes * 60);
    if (count == 0){
        player.SetVar("Countdown_Finished",fin);
}
    if (count < 0) {
        clearInterval(counter);
        return;
    }
    totalTime = minutes + ':' + seconds;
    player.SetVar("Countdown_Display",totalTime);
}

Is there anything I can add to make sure the countdown continues even if the browser tab or window are minimized?

Many thanks for your suggestions.

C.

storyline 360

1 Reply

Sort By
  • Nedim's avatar
    Nedim
    Community Member
    2 months ago

    Unfortunately, I wasn’t able to replicate the issue using your code. I tested it in Chrome, Edge, and Firefox, and everything seemed to work as expected.

    That said, it’s still possible for the issue to occur. Modern browsers often throttle timers in background tabs to conserve CPU and battery. When a tab becomes inactive, setInterval(timer, 1000) isn’t guaranteed to run every second — it may slow down or become inconsistent.

    If the issue keeps happening, a more reliable approach would be to calculate the remaining time based on the actual system clock, rather than relying on setInterval alone. This helps ensure the countdown stays accurate even when the tab is minimized or inactive.

    That said, I can’t guarantee this approach will fully avoid the issue if it’s already happening with your original setup. But it usually helps improve reliability in most cases.

    Example:

    function zeros(i) {
    return (i < 10 ? "0" : "") + i;
}

var duration = getVar("Countdown_Duration");
var fin = "Done";

var endTime = new Date().getTime() + duration * 1000;

var counter = setInterval(function () {
    var now = new Date().getTime();
    var remaining = Math.round((endTime - now) / 1000);

    if (remaining <= 0) {
        clearInterval(counter);
        setVar("Countdown_Display", "00:00");
        setVar("Countdown_Finished", fin);
        return;
    }

    var minutes = Math.floor(remaining / 60);
    var seconds = remaining % 60;

    var totalTime = zeros(minutes) + ":" + zeros(seconds);
    setVar("Countdown_Display", totalTime);

}, 1000);
Related Content