Mac safari set Interval pause when tab is in background - javascript

We are using setInterval & setTimeout both tried in our demo for a time interval. When on safari we will minimize the screen these two methods pause and not working. so, we will get a value mismatch in windows chrome and mac safari.
Anyone can help with it?
Thanks!

Chrome will suspend or slow down timers in some situations as well, I'd be surprised if Firefox doesn't. You can't control how the browser de-prioritizes your window/tab when it's not active.
It's never a good idea to rely on the timer interval, whether setTimeout or setInterval. Any number of things can delay the timer callback, making it happen later than you asked.
If the exact amount of time that passed is important, remember when you started the timer (const start = Date.now();) and find out how long it's really been when the timer callback is called (const elapsed = Date.now() - start;) and act accordingly.

Related

Ionic Capacitor - Timer in Background (iOS / Android)

Is it possible to run a timer in the background (in both iOS and Android) or will it be out of the app-guidelines (specifially on iOS). Right now I am having a meditation-timer-app and one of the most important things is that the time should keep on running while in background mode (if the phone display is black or the home screen is opened).
I am using an interval setInterval() - Method of 1000s to count down each second.
https://capacitorjs.com/docs/v2/apis/background-task#background-tasks says it may not be possible:
NOTE: On iOS setTimeout and setInterval won’t work once your app is in background, so don’t use them inside beforeExit.
So another idea that I would have would be to make a calendar event (for example for a Date that is 10 min in the future if you set the timer to 10mins).
Than it would be a scheduled timer event. If you reopen the app, the timer gets adapted to the calendar event.
Is this possible to wait for a specific date to happen? And how?
Do you have a better solution or can I just use the interval in the background somehow?
For my app this would be very important, since when meditating, you don't want to have the phone open. You want to start the timer and put the phone away.

Simple setInterval timer stalling on tab blur in Safari

I've got a simple timer that I built that works off of a setInterval function. Every 1 second, it increases the value of the timer by 1. When I click off of the tab to a different tab in Safari, it slows down. You can see what I'm talking about in this basic CodePen:
http://codepen.io/anon/pen/rxVMRp
This is the basic JS code:
function setTimer(){
var curTime = parseInt($('.timer').text());
var newTime = curTime+1;
$('.timer').text(newTime);
}
setInterval(setTimer, 1000);
Granted, my timer is a bit more advanced, but you can still see the slow down effect of setInterval in Safari in this basic example. How can I prevent this slow down without having to offload anything to a web worker?
Is there any particular reason you're using a setInterval here? Probably the reason Safari is slowing down on blur is to prevent tabs from wasting CPU cycles when the user isn't paying attention to them. What could possibly be so important in your code that it needs to be updated every second, even when the user isn't focused on it?
At any rate, you could listen for onblur and onfocus to pause or restart the timer as necessary. If you need to keep perfect timekeeping for some other purpose there is always Date.now().

What processing/rendering *don't* browsers do while a tab doesn't have focus?

I've got a page that shows real-time statistics. It runs a lot of javascript, makes a lot of HTTP requests, renders SVG charts every few seconds using D3.js, has a lot of CSS animations, and rearranges the DOM frequently.
As long as the page is focused, it runs smoothly. If I switch to another tab and come back later, there's often a short pause where the page seems to be frozen before the view suddenly seems to rerender and the page becomes usable again. The longer the tab has been backgrounded, the longer this pause is. If the tab has been in the background for a very long time (hours) and I switch back to it, it will be frozen for a long time then crash.
All these behaviors are observed in Chrome. I haven't tested much in other browsers.
What is Chrome doing during that pause when I first switch back to the tab?
You're running a setInterval or a series of setTimeouts.
Each one is queued up to run AFTER the point you specify in the function.
Google throttles everything on your page down to a few updates every second...
...so if you've got timers set to move things around and animate at 30fps or whatever, then you've got Google firing one round of updates (whatever you have scheduled), which will undoubtedly call something requesting another update, which will request another one...
...when you switch back, you've got hundreds (or tens of thousands) of these updates waiting to happen, and now instead of happening at 30fps, you have a bunch of these things waiting... all of them have passed their "do not run until..." time, and they're all going to try to update as fast as physically possible, until you get caught up to where the timer is current again.
If the browser supports the components of the page-visibility API, then pause your calls when the page is not visible.
if (!document.hidden) { doStuff(); }
OR
document.addEventListener("visibilitychange", function (evt) {
if (evt.visibilityState === "hidden") { myApp.pause(); }
else if (evt.visibilityState === "visible") { myApp.resume(); }
});
If it doesn't support the API, then you can try to polyfill it, using window.onblur, or otherwise.
That said, chances are if the browser doesn't support the page-visibility API, it also doesn't do hardcore throttling of the page-code.
That's not a 100% guarantee, but rather a semi-likelihood.

How to keep website's javascript timer enabled while iPhone is locked

When my website is opened in Safari and the iPhone is put into sleep mode, any javascript timers (window.setTimeout) are not executed any more.
Is there a way that these timers get executed even if the screen is locked? It would be sufficient if this happens only if Safari is the active app and the website is the active "tab" in the moment of locking.
I read that apps can prevent "deep sleep" mode by regularly playing a soud. Does this also apply to websites?
Simply change your logic so it doesn't require constant ticks. If it's a countdown timer you could simple store the date every tick and compare the previous date to the current one in each tick - even if you got no ticks for a long time you exactly know which time passed since the last tick.

When does JavaScript interval stops?

It may be a naive question but I need to know the answer.
This is my code,
setInterval(function() { /do stth./}, 1000);
I never cancel the timer, I need to run it as long as user is on the page, I need to know will it case any memory leak, or when will it stop (ie, browser refresh, browser close)?
The only problem can occur when you "do something". If you have other long running functions or even additional intervals inside the interval (a la Javascript Inception) then you could run into performace issues.
However, in almost all cases, you won't have any problems.
When the user refreshes the browser, the interval will begin anew. When the browser is closed then all activity stops.
As long as the user doesn't refresh the browser or leave the page then the interval will never end.
it stops when you leave the page. It shouldn't cause leaks.

Categories

Resources