How to use WeChat embedded H5 web pages to solve the problem of JS countdown failure

Xiaobian to share with WeChat embedded H5 web page to solve the problem of JS countdown failure, I hope everyone will read this article, let us discuss together!

Project Requirements: The H5 Mall page is nestled to the company WeChat public number

The development of the project itself has no too much difference with the mobile web page, but this encounters a problem yesterday, say It is tricky, it is also simple.

After the user orders, in the selection payment method page, there is a countdown logic (calculated from the order, 24 hours after payment, there will be WS automatically cancel this order), the JS code is as follows:

 VAR Timespan = '20160113'; // The background program generates a 24-hour time difference, here is Write Var Timer; function updatetime () {ix (TimeSpan > 0) {var Hour = Math.floor (Timespan / (60 * 60)); var minute = math.fllor (Timespan - (Hour * 60 * 60)) / 60); var second = (TimeSpan - (HOUR * 60 * 60) - (Minute * 60)); var word = "Payment Time" + (Hour   "+ Word; Timer = setTimeout (" UpdateTime () ", 1000);} else {$ ('. Content'). Find ('. w_op'). hide (); cleartimeout; jQuery (". tc"). html ("
<10?("0"+hour):hour) + ":" + (minute<10?("0"+minute):minute) + ":" + (second<10?("0"+second):second) + ",逾期订单将自动取消~"; timespan--; jQuery(".tc").html("" + "order expired, Automatically cancel ~ "); Window.locatiON.href = '@ Url.Action ("ORDERDERDETAIL", "ORDER", new {OrderNumber = Model.NO}' ;; // Order Expire, Jump to Order Details Page}} jQuery (Document) .ready ( Function () {updatetime ();}); The page effect is as follows:
There is no problem, and the local test is OK.

However, when it is on the outside, the problem is coming. Android version of WeChat, when the mobile phone lock screen, the countdown did not go, still shut down the screen before, that is, the time, time is still …

怎么利用微信内嵌H5网页解决JS倒计时失效的问题 Later, then, of course, Urgent, all parties are rescued, finding the method, so there is a countdown:

When entering the page for the first time, the request server gets the rest time of the countdown, then the page passes by JS. The phone is still in progress after the phone is unlocked, but the time is not accurate, the reason is that the reason is not to request the time of the request server to re-count down, but according to the last lock screen. This is because the browser has a cache. When the new page is not refreshed, the browser caches the first request, and the browser still shows the first content after the server update

Later, multi-part verified You can set in Meta, set page NOCACHE, each access sub-page, need to be re-acquired from the server instead of reading

Expires in the cache

Expires set expiration time, once expired, you must request the server

Expries appears in the HTTP-Equiv property, using the Content property indicates the expiration time of the page cache

expries = 0, the number of minutes before the expiration. If the user returns the page before the page expires, it will be slow.Departs page


 After reading this article, I believe how you are With WeChat embedded H5 web page to solve the problem of JS countdown failure, I want to know more related knowledge, welcome to pay attention to Tumi Yun Industry Information Channel, thank you for reading!                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment