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

　　今天开发了一个手机端的倒计时，然后同事说出现了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 = new Date().getTime();   //获得当前本地时间
  var serverTimeMulse = serverTime - now;   //获得初始化时间差
  timer = setInterval(function() {
      now = new Date().getTime() + serverTimeMulse; //获取此刻服务器时间

　　　　 mulse = overTime - now; //获得结束时间与当前是按的差值
　　　　 var d = TouDo(Math.floor(mulse / (1000 * 60 * 60 * 24))); //通过运算得到天数
　　　　 mulse -= d * (1000 * 60 * 60 * 24); //获取剩余的时间用来获取小时数
　　　　 var h = TouDo(Math.floor(mulse / (1000 * 60 * 60))); //得到小时数
　　　　 mulse -= h * (1000 * 60 * 60); //获取剩余的时间用来获取分钟数
　　　　 var min = TouDo(Math.floor(mulse / (1000 * 60))); //得到分钟数
　　　　 mulse -= min * (1000 * 60); //获取剩余的时间用来获取秒数
　　　　 var s = TouDo(Math.floor(mulse / 1000)); //得到秒数

});

　　function TouDo(n) {
　　　　return n >= 10 ? "" + n : "0" + n;
　　}

之后测试，没问题，Bug解除，虽然此种方式顺利解决Bug，但是还是存在如下问题：

1、性能问题，每秒都获取时间戳会影响页面的性能

2、用户在退出本页面然后修改时间之后再重新打开本页面（注意是未刷新情况），初始化的时间差不能及时更新

各位过路大神有新的见解还望不吝赐教 ^(*_*)^

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

猜你喜欢