首頁 > 文章 > web前端 > 如何利用微信內嵌H5網頁解決JS倒數失效的問題

如何利用微信內嵌H5網頁解決JS倒數失效的問題

不言原創: 2018-06-11 16:51:201923瀏覽

最近參考專案開發，遇到這樣一個需求將H5商城頁面嵌套到公司微信公眾號裡，在開發遇到一個棘手的問題，js倒數失效問題，怎麼回事呢？以下說下我使用微信內嵌h5解決的這一問題，需要的朋友參考下吧

專案要求：將H5商城頁嵌套到公司微信公眾號裡

專案本身的開發跟行動裝置網頁並無太多差異，只是這昨天遇到一個問題，說是棘手，到也簡單。

使用者下單後，在選擇付款方式頁面，有倒數計時的邏輯（從下訂單時開始計算，24小時後未支付，會有ws自動取消這個訂單），js程式碼如下：　

<script type="text/javascript"><br> var timespan = &#39;20160113&#39;; //后台程序生成24小时时间差值，这里随便写写
  var timer;
  function UpdateTime() {
   if (timespan > 0) {
    var hour = Math.floor(timespan / (60 * 60));
    var minute = Math.floor((timespan - (hour * 60 * 60)) / 60);
    var second = (timespan - (hour * 60 * 60) - (minute * 60));
    var word = "支付剩余时间" + (hour<10?("0"+hour):hour) + "：" + (minute<10?("0"+minute):minute) + "：" + (second<10?("0"+second):second) + "，逾期订单将自动取消~";
    timespan--;
    jQuery(".tc").html("<i class=&#39;time&#39;></i>" + word);
    timer = setTimeout("UpdateTime()", 1000);
   }
   else {
    $(&#39;.content&#39;).find(&#39;.w_op&#39;).hide();
    clearTimeout(timer);
    jQuery(".tc").html("<i class=&#39;time&#39;></i>" + "订单过期，已自动取消~");
    window.location.href=&#39;@Url.Action("orderDetail", "Order", new { OrderNumber = Model.No })&#39;;; //订单过期，跳转到订单详情页
   }
  }
  jQuery(document).ready(function () {
   UpdateTime();
  });<br></script>

　　頁面效果如下：

##　　這樣寫，本來沒有任何問題的，而且本地測試都ok。

　　可是，放到外側的時候，問題就來了。安卓版微信，會出現當手機鎖定畫面時，出現倒數計時沒有走，仍然是關閉螢幕前時間，也就是說息屏這段時間，時間靜止了...

　　後來，後來當然不能著急啊，各方求救，尋找方法，於是有了下面：

　　倒數計時的實現，在第一次進入頁面時，請求伺服器獲取倒數計時的剩餘時間，然後在頁面透過js等手段再倒數計時；手機在鎖定畫面後再解鎖後倒數計時還在進行但是倒數計時的時間不准確，究其原因是在解鎖後沒有去請求伺服器的時間來重新倒數計時而是還是按照上次鎖定畫面的基礎上進行倒數計時的，這是因為瀏覽器有緩存，在不刷新頁面的情況下，瀏覽器會緩存第一次請求的內容，服務端更新後瀏覽器仍然顯示第一次的內容

　　後來多方查證，可以在meta裡進行設置，設定頁面nocache，每次訪問次頁面，均需要從伺服器重新獲取，而不是使用快取中讀取

　 expires設定過期時間，一旦過期就必須請求伺服器，

　 expries出現在http-equiv屬性中，使用content屬性表示頁面快取的過期時間

　 expries=0，快取過期前的分鐘數。若使用者在頁面過期前返回該頁面，就會顯示快取的版本頁

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0">

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

如何利用微信內嵌H5網頁解決JS倒數失效的問題

相關文章