-2

This doesn't help - How can I make setInterval also work when a tab is inactive in Chrome? Actually, my code below is pretty similar...

The purpose: I need to take 25 minutes (15.000 seconds) and make a countdown to 0.

The problem: It doesn't work in inactive tabs on Mac. It slows down or even stops fully after some period of time.

I tried different options:

  • Moved the logic to a Worker (a separate worker.js file)

  • Used the difference between started Date and the current Date in the function

  • Used this lib https://github.com/turuslan/HackTimer

  • And lots of different own variants of the code

Nothing helped...

My worker.js:

let timerId;

self.onmessage = function(evt) {
    if (evt.data.command === 'start' || evt.data.command === 'stop') {
        clearInterval(timerId);
    }

    if (evt.data.command === "start") {
        let seconds = evt.data.value;

        timerId = setInterval(function() {
            seconds--;

            let currentSeconds = parseInt(Date.now() / 1000, 10);
            let secondsLeft = evt.data.finishedAt - currentSeconds;

            console.log(secondsLeft, seconds);

            if (secondsLeft !== seconds) {
                seconds = secondsLeft;
            }

            self.postMessage(seconds);
        }, 1000);
    }
};

But this tricky logic doesn't help:

if (secondsLeft !== seconds) {
    seconds = secondsLeft;
}

How I use my worker:

                let startedAt = parseInt(Date.now() / 1000, 10);
                let finishedAt = startedAt + v.currentState.timer.value;

                v.currentState.worker.postMessage({
                    'command': 'start',
                    'value': v.currentState.timer.value,
                    'startedAt': startedAt,
                    'finishedAt': finishedAt
                });

                    v.currentState.worker.onmessage = function(e) {
                        v.currentState.timer.value = e.data;
                    };
Bohdan Vorona
  • 685
  • 1
  • 13
  • 26

1 Answers1

-2

The top answer for How can I make setInterval also work when a tab is inactive in Chrome? is actually also the answer for you. You need to note the timestamp of when the countdown started (via Date), and then use window.onfocus and window.onblur to setup the interval only while the browser tab is active (clear the interval when the tab loses focues). The countdown to display can be calculated from the starting time. Simply don't rely on setInterval at all while the tab isn't active.

timotgl
  • 2,865
  • 1
  • 9
  • 19
  • Please have a look at my code. Lines 14-21 https://pastebin.com/KJU24yqX – Bohdan Vorona May 11 '23 at 10:46
  • In addition, I need to update the counter in the tag . I'm not sure that the proposed by you solution will help... – Bohdan Vorona May 11 '23 at 10:51
  • @BohdanVorona The requirement to update the title of the tab was not in your original question. – timotgl May 11 '23 at 13:55
  • @BohdanVorona According to https://stackoverflow.com/questions/37704641/access-dom-by-web-worker web workers don't have access to `document.title` so I don't think this works at all. Given that, my answer works for rendering the countdown when the user returns to the tab. – timotgl May 11 '23 at 13:59