Web timer stagnation problem

write a timer on the mobile web page. For example, I use my phone to enter this web page and start the countdown to 3 minutes. At this time, I cut out from this page (home button or phone lock screen). Wait 2 minutes later, and then open the countdown page. At this time, it shows that there are still 2 minutes and 30 seconds left in the countdown. Theoretically, the countdown should only be 1 minute. I would like to ask all the great gods have encountered such a problem, how to solve it? Do you have any good ideas and ideas? Thank you!

Feb.19,2022
When the

page enters the background, the js does not execute, and the timer will not go. Depending on whether you have high requirements for countdown, you can use the current timestamp minus the countdown start timestamp when the page is cut back. If you want to be high, the backend server performs the countdown, and when the listening page is cut back, you can retrieve the countdown time from the background


the usual way of thinking: every 1s minus 1s, the error will accumulate and will be interrupted.

change the way of thinking: every 1s, use the end time minus the current time, the error only exists in the error of this timer.


record the current local time var start = Date.now ()

when the countdown begins.

calculate the difference between the current time and the start time each time through setTimeout var walkTime = Date.now ()-start

The cut-out of the

page does not affect the accuracy of the wakeTime, because it is not determined by the time of the timeout timer, but by the execution time of the callback function.


depending on the system, model, browser and other factors, the suspension may cause the js not to execute. As mentioned above, you can set the end time in advance, and then use the end time minus the current time to calculate.

Menu