使用微信内嵌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 相关文章推荐
jquery键盘事件使用介绍
Nov 01 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
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获取程序执行的时间
2013/06/09 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
极简的Python入门指引
2015/04/01 Python
django 发送手机验证码的示例代码
2018/04/25 Python
解决python 找不到module的问题
2020/02/12 Python
python with语句的原理与用法详解
2020/03/30 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
Python字符串及文本模式方法详解
2020/09/10 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
公司董事长职责
2013/12/12 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
禁烟标语大全
2014/06/11 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
SQL Server中搜索特定的对象
2022/05/25 SQL Server