介绍
小编给大家分享一下怎么利用微信内嵌H5网页解决JS倒计时失效的问题,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
项目要求:将H5商城页面嵌套到公司微信公众号里
项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单。
用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),JS代码如下:
& lt;脚本类型=拔谋?javascript"祝辞& lt; br>var时间间隔=& # 39;20160113 & # 39;;//后台程序生成24小时时间差值,这里随便写写
var定时器;
函数UpdateTime () {
如果时间间隔比;0){
乏时=数学。地板(时间间隔/(60 * 60));
var分钟=数学。地板((时间间隔(小时* 60 * 60))/60);
var第二=(时间间隔(小时* 60 * 60)——(分钟* 60));
var词=爸Ц妒Ｓ嗍奔洹?+ (hour<10 ?(“0, +小时):小时)+“:“+ (minute<10 ?(“0, +分钟):分钟)+“:“+ (second<10 ?(“0, +秒):秒)+“,逾期订单将自动取消~“;
时间间隔);
jQuery (“.tc") . html (“& lt;我类=& # 39;时间# 39;祝辞& lt;/i>“+文字);
计时器=setTimeout (“UpdateTime ()“, 1000);
}
其他{
美元(& # 39;.content& # 39;); (& # 39; .w_op& # 39;) hide ();
clearTimeout(计时器);
jQuery (“.tc") . html (“& lt;我类=& # 39;时间# 39;祝辞& lt;/i>“+“订单过期,已自动取消~“);
window.location.href=https://www.yisu.com/zixun/' .action (“orderDetail”、“秩序”,新的OrderNumber={模型。没有});;//订单过期,跳转到订单详情页
}
}
jQuery(文档)。准备好(函数(){
UpdateTime ();
});
页面效果如下:
这样写,本来没有任何问题的,而且本地测试都好。
可是,放到外侧的时候,问题就来了。安卓版微信,会出现当手机锁屏时,出现倒计时没有走,仍然是关闭屏幕前时间,也就是说息屏这段时间,时间静止了…
后来,后来当然不能着急啊,各方求救,寻找方法,于是有了下面:
倒计时的实现,在第一次进入页面时,请求服务器获取倒计时的剩余时间,然后在页面通过js等手段再倒计时,手机在锁屏后再解锁后倒计时还在进行但是倒计时的时间不准确,究其原因是在解锁后没有去请求服务器的时间来重新倒计时而是还是按照上次锁屏的基础上进行倒计时的,这是因为浏览器有缓存,在不刷新页面的情况下,浏览器会缓存第一次请求的内容,服务端更新后浏览器仍然显示第一次的内容
后来多方查证,可以在元里进行设置,设置页,面使用nocache每次访问次页面,均需要从服务器重新获取,而不是使用缓存中读取
到期设定过期时间,一旦过期就必须请求服务器,
expries出现在http-equiv属性中,使用内容属性表示页面缓存的过期时间
expries=0,缓存过期前的分钟数。若用户在页面过期前返回该页面,就会显示缓存的版本页
& lt;元http-equiv=皃ragma"内容=皀o-cache"比;
& lt;元http-equiv=癱ache-control"内容=皀o-cache"比;
& lt;元http-equiv=癳xpires",内容=?”的在 看完了这篇文章,相信你对怎么利用微信内嵌H5网页解决JS倒计时失效的问题有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
