使用微信内嵌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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
Jquery倒计时源码分享
May 16 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
如何用JS模拟实现数组的map方法
Jul 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脚本的10个技巧(4)
2006/10/09 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
详解jQuery选择器
2016/12/21 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python常见异常分类与处理方法
2017/06/04 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
python如何保存文本文件
2020/06/07 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
自我鉴定思想方面
2013/10/07 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Pandas-DataFrame知识点汇总
2022/03/16 Python