html倒计时严重延迟,html5在手机熄屏后倒计时会出现延迟情况

小灰灰 2022-10-10 06:26 173阅读 0赞

今天开发了一个手机端的倒计时，然后同事说出现了Bug，怎么回事呢？Bug很简单，就是在手机返回主界面或者熄屏后倒计时会暂停在熄屏前的时间(注意时间是页面加载时获取的服务器的时间)，问题很简单，知道问题所在，百度！在网上查了好多，然后发现一个很神奇的事件：visibilityChange，先在PC端实验，然后发现切换网页再切回来能触发这个事件，好事啊，那是不是移动端也可以这样处理呢，网页切回来或者熄屏后重新打开然后重新获取后台时间不是就OK了吗，说干就干：代码如下：

document.addEventListener('visibilityChange', function() \{if (document.VisibilityState == 'hidden') \{

alert("backStage");

\}else\{

alert("welocme back");

\},false);

PC端切换页面能弹出东西，好开心，然而(我想大家都怕好事后面的然而)，移动端没反应？What？为啥不行？说好的当文档从可见变为不可见或者从不可见变为可见时，会触发该事件，可是确实没触发，对了可能是兼容问题，这个事件的兼容性贼恶心，捣饬了大段的代码，然后。。。

·　　伤心，换个方式，很多大神说调用webSocket，不过感觉好麻烦，放弃，再想办法，程序猿么，天生就是解决问题的，再想办法，然后就有了一下这种方式(当然是以牺牲一点点性能实现的)

逻辑很简单，页面初始化时获取服务器的事件，然后再获取本地时间，然后求出服务器时间和本地时间是的差值，然后再计时器运行时每秒获取一次时间戳，然后加上前面运算的到的差值，也就是说每一秒都获取当前的时间戳然后要通过运算得到目前服务器的时间，下面上代码：

var mulse = "";var timer = null;var overTime = new Date("2018/6/18 08:30:00").getTime(); //设置倒计时结束时间

//var now = new Date().getTime(); //获取打开时时间

var now = null;var serverTime = 1527042000000; //获得服务器时间

now= newDate().getTime(); //获得当前本地时间var serverTimeMulse = serverTime -now; //获得初始化时间差