搜索
首页web前端H5教程如何利用微信内嵌H5网页解决JS倒计时失效的问题

最近参考项目开发,遇到这样一个需求将H5商城页面嵌套到公司微信公众号里,在开发遇到一个棘手的问题,js倒计时失效问题,怎么回事呢?下面说下我使用微信内嵌h5解决的这一问题,需要的朋友参考下吧

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

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

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

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

  页面效果如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何使用HTML5 File接口在web页面上使用文件下载

HTML5中postMessage API的基本使用

新增HTML5的八类INPUT输入

以上是如何利用微信内嵌H5网页解决JS倒计时失效的问题的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
微信文件多久过期微信文件多久过期Nov 21, 2022 pm 02:12 PM

微信文件的过期时间需要根据情况来判断:1、如果发送的文件没有打开过,则在72小时以后微信系统会自动清理掉,即过了三天文件就会过期;2、如果已经查看了微信文件,但是并没有下载(当然已经下载的文件也是一样的),那么文件是可以保留180天的,在这180天以内随时都可以去下载。

微信拉黑和删除有什么区别微信拉黑和删除有什么区别Oct 18, 2022 am 11:29 AM

区别:1、拉黑后对话框从主页消失,但是聊天记录还在;删除后聊天记录全部消失不见了。2、拉黑后还能发给他,但是收不到他的消息;删除后不能发信息了。3、拉黑后双方都不可见彼此的朋友圈;删除对方以后,你看不到对方的朋友圈了,对方是否能看到你的,取决于设置(允许陌生人查看十张照片)与否,如果设置则可以看到朋友圈。

支持微信付款的购物平台有哪些支持微信付款的购物平台有哪些Nov 02, 2022 pm 02:44 PM

支持微信付款的购物平台有:1、京东,是中国的综合网络零售商;2、唯品会,是一家在线销售品牌折扣商品的互联网公司;3、拼多多,是社交新电商领导者,更懂消费者的购物平台;4、京喜,是京东旗下生活消费商城;5、蘑菇街,一个电子商务网站;6、聚美优品,是一家以销售化妆品为主的时尚购物网站;7、微店,是一个云推广电子商务平台;8、考拉海购,是一个跨境海淘业务为主的会员电商平台。

微信怎么查看ip地址微信怎么查看ip地址May 31, 2023 am 09:16 AM

微信查看ip地址的方法:1、登录电脑版微信,右键点击屏幕下方的任务栏,点击“任务管理器”;2、弹出任务管理器时,点击左下角的“详细信息”;3、任务管理器进入“性能”选项,点击“打开资源监视器”;4、选择“网络”,勾选微信进程“Wechat.exe”;5、点击下面的“TCP连接”即可监视微信网络IP相关情况,发送消息得到回复就会显示他人的IP地址。

微信可以绑别人的银行卡号么微信可以绑别人的银行卡号么Mar 14, 2023 pm 04:53 PM

可以。未经过实名认证的微信号,可以绑定他人的银行卡,但在绑定过程中需要提供银行卡的开户人姓名、开户行地址、开户时预留的联系方式及银行卡支付密码;已通过实名认证的微信号,无法绑定他人银行卡,只能添加使用自己身份证办理的银行卡。

财付通是微信还是支付宝财付通是微信还是支付宝Oct 18, 2022 pm 02:35 PM

财付通是微信,是腾讯公司旗下的第三方支付平台,其核心业务是协助在互联网上进行交易的双方完成支付和收款,其使用方式是:1、进行账户注册及登录;2、进行账户充值;3、根据需求设置快捷支付;4、通过打开微信支付或QQ钱包查询交易账单。

电脑微信打字为什么打一个少一个电脑微信打字为什么打一个少一个Mar 28, 2023 pm 03:43 PM

电脑微信打字打一个少一个是因为开启了改写状态,其解决办法:1、打开电脑微信;2、在微信聊天窗口输入对话文字内容;3、找到并按下键盘上的Insert键即可正常输入文字内容。

一个身份证只能绑定一个微信吗一个身份证只能绑定一个微信吗Mar 02, 2023 pm 01:50 PM

不是,一个身份证能绑定5个微信。按照微信当前规定,一个身份证可以实名认证5个微信号;如果已经实名认证了5个微信账号,但是还想要继续实名,就要把已经实名认证的一些不用的微信号清除以后,才可以再实名认证新的微信号。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具