使用微信内嵌H5网页解决JS倒计时失效问题


Posted in Javascript onJanuary 13, 2017

 项目要求:将H5商城页面嵌套到公司微信公众号里

    项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单。

    用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: 

<script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成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='time'></i>" + word);
    timer = setTimeout("UpdateTime()", 1000);
   }
   else {
    $('.content').find('.w_op').hide();
    clearTimeout(timer);
    jQuery(".tc").html("<i class='time'></i>" + "订单过期,已自动取消~");
    window.location.href='@Url.Action("orderDetail", "Order", new { OrderNumber = Model.No })';; //订单过期,跳转到订单详情页
   }
  }
  jQuery(document).ready(function () {
   UpdateTime();
  });<br></script>

页面效果如下:

使用微信内嵌H5网页解决JS倒计时失效问题

这样写,本来没有任何问题的,而且本地测试都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">

以上所述是小编给大家介绍的使用微信内嵌H5网页解决JS倒计时失效问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用js写的一个简易的投票
Nov 27 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
bootstrap按钮插件(Button)使用方法解析
Jan 13 #Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 #Javascript
bootstrap警告框使用方法解析
Jan 13 #Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 #Javascript
js实现文字向上轮播功能
Jan 13 #Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 #Javascript
js实现交通灯效果
Jan 13 #Javascript
You might like
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
JS实现手写parseInt的方法示例
2017/09/24 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Python多线程实例教程
2014/09/06 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
介绍一下gcc特性
2015/10/31 面试题
优秀教师获奖感言
2014/01/31 职场文书
财务部经理岗位职责
2014/02/03 职场文书
幼儿教师研修感言
2014/02/12 职场文书
大学军训感言600字
2014/02/25 职场文书
家长会主持词
2014/03/26 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
运动会拉拉队口号
2014/06/09 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android