onTimerRunning don't work when tab is not active

[PaykomanVll]

Hello,

as first let me say you have do a nice Script here, i like it ! =)

But i have a little problem, your timer is anymore running when the tab is anymore in focus.
That is a problem then il added a tick-function on onTimerRunning, so when timer is done it will play an alert sound.

But the tab need to be still active to run the tick-function, this is a big problem.
is it a native problem of canvas or on your script?

I would be very much happy if you can help/fix.

Thank you.

[georapbox]

Hi there,

I think the issue is the fact that the library is using requestAnimationFrame under the hood and when the tab is not active, the browser throttles to optimise performance. Eventually, if you return back to the tab, the timer should be finished but as you said you won't hear the alert sound while the tab is inactive.

A possible solution would be to add an option to use setInterval instead of requestAnimationFrame but again, I'm not sure even if this would solve the problem 100% because in general modern browsers tend to give low priority to inactive tabs for performance and even accessibility reasons. For example, depending on the way that you create the alert sound, some browsers (Chrome including) might not play the sound at all if the tab is inactive.

In general, I think that another solution to your problem might be to spawn a Web Worker and post "ticks" to the main thread. The Web Worker is allowed to use intervals/timeouts without limitation and is running on another thread in the background even if the tab is inactive.

I will also have a look if a proper solution can be applied to the library itself.

[PaykomanVll]

Would just tell my solution, maybe any other can help it.

`
setInterval(function(){
if( document.hidden ){
var now = Date.now();

    for( var id in timers ){
        if( timers.hasOwnProperty(id) && timers[id]._timer._started && now >= (dateTimeToDate(timers[id].options.dt).getTime() /* + timerSettings.clientdiff */) ){ // server time is buggy do not use diff
            // console.log('expired hidden', timerSettings.clientdiff, timers[id].options.dt, Date());
            timerExpired(id);
        }
    }
}

}, 1000);
`