The problem and solution of the countdown of the mobile version of the Web page JS

Countdown to the Mobile Web page (using service-side time to Countdown) we need to consider two issues: 1, to avoid frequent access to service-side time, 2, the mobile phone in the lock screen State or browser/page in the background to run the countdown to the processing; around these two issues to talk about my solution (Shrimp Tiger Fish original).

First, the method of obtaining the service end time

To achieve the countdown, we have to know the rest of the time, know the remaining time must know the current time (server time) and end time. The server time and end time can be obtained in two ways:

The back end is output directly in the view;

through Ajax to obtain;

To reduce HTTP requests I choose the first way to output the end time and the service end time directly in the view, such as:

After two hours, the end time Endtime is always the same, but the server time servertime is always changing, and we only get one server time, then we need to implement how to synchronize with the server time, we can do this: when the page is open, I record this moment at the same time, And save this time in a variable instant, and then at any time after the page is opened to get the service end of the time through the current local times minus instant time plus servertime time, namely: Date.now ()-Instant + Servertime, we put the following JS code into the head of the HTML page (in the head instant and servertime are defined to reduce the error):

var servertime = ' 2015-4-10 09:32:17 ';
var endtime = ' 2015-4-12 09:00:00 ';
var instant = Date.now ();

Finally, we use Date.now ()-Instant + Servertime to calculate the time difference to achieve the countdown.

Note the following issues exist with this method:

If the client's time is modified, then the service end time is not correct;
If the network environment difference also can cause certain error;


The impact of Device lock screen or browser/page background operation


If the device is in the lock screen or the browser/page is running in the background for a period of time to return to the page, you will find that the countdown is slow (for specific reasons I do not know, it is possible that the browser in hibernation caused JS execution pause, pure speculation), then we need to the countdown to I also have two solutions for this problem:

Use the timer to automatically correct the time intervals;
Use the Visibilitychange event to listen for the hidden state of the document, that is, to view the Document.hidden value, false to page display, and true to page hide:

Document.addeventlistener ("Visibilitychange", function (e) {

if (!e.path[0].hidden) {//E.path for the collection of document in the page 
  //Calibration Countdown code ...

}

}, False);

The first method is feasible but has some drawbacks, it is recommended to use the second method.
So far, the mobile version of the Web page JS Countdown Two problems have been resolved.