使用微信內(nèi)嵌H5網(wǎng)頁(yè)解決JS倒計(jì)時(shí)失效問題

更新時(shí)間：2017年01月13日 11:24:09 作者：阿良君

最近參考項(xiàng)目開發(fā)，遇到這樣一個(gè)需求將H5商城頁(yè)面嵌套到公司微信公眾號(hào)里，在開發(fā)遇到一個(gè)棘手的問題，js倒計(jì)時(shí)失效問題，怎么回事呢？下面說下我使用微信內(nèi)嵌h5解決的這一問題，需要的朋友參考下吧

項(xiàng)目要求：將H5商城頁(yè)面嵌套到公司微信公眾號(hào)里

項(xiàng)目本身的開發(fā)跟移動(dòng)端網(wǎng)頁(yè)并無(wú)太多差異，只是這昨天遇到一個(gè)問題，說是棘手，到也簡(jiǎn)單。

用戶下單后，在選擇支付方式頁(yè)面，有個(gè)倒計(jì)時(shí)的邏輯（從下單時(shí)開始計(jì)算，24小時(shí)后未支付，會(huì)有ws自動(dòng)取消這個(gè)訂單），js代碼如下：　

<script type="text/javascript"><br> var timespan = '20160113'; //后臺(tái)程序生成24小時(shí)時(shí)間差值，這里隨便寫寫
  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 = "支付剩余時(shí)間" + (hour<10?("0"+hour):hour) + "：" + (minute<10?("0"+minute):minute) + "：" + (second<10?("0"+second):second) + "，逾期訂單將自動(dòng)取消~";
    timespan--;
    jQuery(".tc").html("<i class='time'></i>" + word);
    timer = setTimeout("UpdateTime()", 1000);
   }
   else {
    $('.content').find('.w_op').hide();
    clearTimeout(timer);
    jQuery(".tc").html("<i class='time'></i>" + "訂單過期，已自動(dòng)取消~");
    window.location.href='@Url.Action("orderDetail", "Order", new { OrderNumber = Model.No })';; //訂單過期，跳轉(zhuǎn)到訂單詳情頁(yè)
   }
  }
  jQuery(document).ready(function () {
   UpdateTime();
  });<br></script>

　　頁(yè)面效果如下：

　　這樣寫，本來沒有任何問題的，而且本地測(cè)試都o(jì)k。

　　可是，放到外側(cè)的時(shí)候，問題就來了。安卓版微信，會(huì)出現(xiàn)當(dāng)手機(jī)鎖屏?xí)r，出現(xiàn)倒計(jì)時(shí)沒有走，仍然是關(guān)閉屏幕前時(shí)間，也就是說息屏這段時(shí)間，時(shí)間靜止了...

　　后來，后來當(dāng)然不能著急啊，各方求救，尋找方法，于是有了下面：

　　倒計(jì)時(shí)的實(shí)現(xiàn)，在第一次進(jìn)入頁(yè)面時(shí)，請(qǐng)求服務(wù)器獲取倒計(jì)時(shí)的剩余時(shí)間，然后在頁(yè)面通過js等手段再倒計(jì)時(shí)；手機(jī)在鎖屏后再解鎖后倒計(jì)時(shí)還在進(jìn)行但是倒計(jì)時(shí)的時(shí)間不準(zhǔn)確，究其原因是在解鎖后沒有去請(qǐng)求服務(wù)器的時(shí)間來重新倒計(jì)時(shí)而是還是按照上次鎖屏的基礎(chǔ)上進(jìn)行倒計(jì)時(shí)的，這是因?yàn)闉g覽器有緩存，在不刷新頁(yè)面的情況下，瀏覽器會(huì)緩存第一次請(qǐng)求的內(nèi)容，服務(wù)端更新后瀏覽器仍然顯示第一次的內(nèi)容

　　后來多方查證，可以在meta里進(jìn)行設(shè)置，設(shè)置頁(yè)面nocache，每次訪問次頁(yè)面，均需要從服務(wù)器重新獲取，而不是使用緩存中讀取

　 expires設(shè)定過期時(shí)間，一旦過期就必須請(qǐng)求服務(wù)器，

　 expries出現(xiàn)在http-equiv屬性中，使用content屬性表示頁(yè)面緩存的過期時(shí)間

　 expries=0，緩存過期前的分鐘數(shù)。若用戶在頁(yè)面過期前返回該頁(yè)面，就會(huì)顯示緩存的版本頁(yè)　　　

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

以上所述是小編給大家介紹的使用微信內(nèi)嵌H5網(wǎng)頁(yè)解決JS倒計(jì)時(shí)失效問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: