使用微信内嵌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实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 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版国家代码、缩写查询函数代码
2011/08/14 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
jQuery 动画基础教程
2008/12/25 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
js实现点击生成随机div
2020/01/16 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
python向图片里添加文字
2019/11/26 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
就业意向书
2014/07/29 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
酒店开业主持词
2015/07/02 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
图文详解Nginx版本平滑升级方案
2021/09/15 Servers