Problem solving for mobile web and JS timer pause or inaccurate timing

Browsers such as Firefox, Chrome, and Safari on your PC will automatically change the minimum value of the JavaScript timer (setTimeout, setinterval) interval in the inactive page to 1 seconds or more , and browsers on mobile devices tend to freeze all timers on inactive pages directly. " Keep talking about JavaScript timers and mobile Web this conversation today.

Timer

The simplest timer requires only a single time variable and a fixed interval to run the function, and periodically the last time (the default is the system initial time) plus the run interval is the current time. On the PC, this implementation of the timer as long as the run interval is not less than 1s, mostly no big problem. But the mobile side is not the same, as long as the page is not displayed in the foreground, the timer will not go completely.

This problem is easy to solve, as long as the timer function in the time to accumulate logic, change every time from the system time to get it. What if the system time is not allowed to do? In fact, most smartphones, by default, will open the network school, and many people have the habit of taking mobile phone as a watch, so the mobile Web to get the system time, compared to the PC side, to be much more accurate.

More rigorous approach is to serve the output page when the server time, JS timer first calculate this time and system time difference Δt, and then each time with the current system time +ΔT to restore the server time. Logic is simple enough to introduce, say two questions:

1) What if the user changes the system time when the timer is running? There are many solutions to this problem, but on the mobile device there is a lazy way, because the mobile device to modify the system time almost certainly will let the page into the background, so we just need to refresh the page when "back from the background".

2) mobile devices in the 2G and other network environment, receive response takes longer, it is possible JS from the page to get server time, has been a few 10 seconds after the thing, lost accuracy. If it is important to solve this problem, using HTML5 new Navigation Timing API to fix is a way of thinking. In the ointment is Android 4.0+ support, Safari series has never supported this API.

Cut back from the background

To determine if there are many scenarios in which the mobile page is being cut back from the background, there is a simple and versatile way to use the background page timer to freeze this feature:

var lasttime = +new  date;setinterval (function() {    if( Math.Abs (+new date-lasttime) > (){        alert (' cut back from the background! ');    }     = +New1000);

The principle is very simple, every time (such as 1s) to update a variable on the page, if the next time this variable and the current system time difference is greater than a certain threshold (such as 3s), the page timer must be frozen, that is, the page is cut back from the background. The code is added math.abs because the user may change the system time back (of course, in extreme cases will not be detected, ignoring it).

Another type of timer

"The Web timer will not be stopped by iOS", the principle is to use the iOS freeze <meta> tag Refresh function Simulation JS timer, interested students can click here to understand the next.

This article link: https://www.imququ.com/post/mobile_web_and_js_timer.html

This article is reproduced from: Jerryqu's small station