本文针对微信内嵌H5商城页面中JS倒计时在安卓手机锁屏后时间静止的问题，分析了浏览器缓存导致的时间不同步原因。通过解析服务器返回的剩余时间并结合Meta标签设置no-cache和expires=0，强制页面每次访问重新获取数据，从而确保倒计时准确运行。
微信H5倒计时锁屏失效问题背景
项目需求是将H5商城页面嵌入到公司微信公众号中。
该项目的开发流程与常规移动端网页开发基本一致，但昨日遇到一个看似棘手实则简单的问题。
在用户下单后的支付方式选择页面，存在一个倒计时逻辑：从下单时刻开始计算，若24小时内未支付，系统将自动取消订单。相关的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>页面的实际显示效果如下图所示：
这种写法在本地测试环境中运行正常，没有任何问题。
安卓微信锁屏导致倒计时静止的原因分析
然而，当页面部署到微信外部容器后，问题显现：在安卓版微信中，当手机屏幕熄灭（锁屏）时，倒计时会停止运行，时间停留在关闭屏幕前的那一刻；也就是说，在息屏期间，时间仿佛静止了。
面对这一情况，经过多方求助与排查，找到了以下解决方案：
基于服务器时间同步与缓存控制的解决方案
倒计时的实现机制是在首次进入页面时，向服务器请求获取倒计时的剩余时间，随后在页面端通过JS进行倒计时计算。当手机从锁屏状态解锁后，虽然倒计时仍在继续，但时间显示不准确。其根本原因在于，解锁后并未重新请求服务器时间以重置倒计时，而是继续基于上次锁屏时的状态进行计算。这是因为浏览器存在缓存机制，在不刷新页面的情况下，浏览器会缓存第一次请求的内容，即使服务端数据已更新，浏览器仍显示缓存中的旧内容。
经过多方查证，可以通过在HTML的meta标签中设置页面不缓存（no-cache）来解决。这样设置后，每次访问该页面时，都会强制从服务器重新获取最新数据，而不是读取本地缓存。
其中，expires属性用于设定过期时间，一旦过期，客户端必须重新向服务器发起请求。
expires属性位于http-equiv属性中，并通过content属性来指定页面缓存的过期时间。
当设置expires=0时，表示缓存过期前的分钟数为0。如果用户在页面过期前返回该页面，将显示缓存的版本页；而设置为0则确保每次访问都视为过期，从而强制刷新。
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">以上介绍了在微信内嵌H5网页中解决JS倒计时失效问题的方法，希望能对大家有所帮助。如有疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！