Javascript setinterval 移动端息屏，倒计时异常

Javascript setinterval 倒计时兼容移动端发布于 2020-10-30

双11来了，商家活动满天飞，线上影响到线下，一场盛大的购物狂欢节即将到来。预热活动比以往更提前了，电商平台活动更是花样百出，尽力的「劝说」你花光手里的钱，钱不够，花呗来凑，做个精致的自已。

对于层出不穷的活动，倒计时抢购活动一直深受商家喜爱。限定的时间内，让买家觉的商家正在大甩卖中：营造商品数量稀少，价格优惠，时间紧迫，错过了又等一年的假象。许多人就是管不住自已手，明知道假的，偏偏轻易上了商家的贼船。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

在PC网页端，利用 setInterval() 函数，每隔 1000 秒刷新当前页面时间，极大的刺击买家的视觉感官司，诱发买家心中冲动购买的野兽。

setInterval() 函数制作倒计时活动，即简单，又实用。在移动端的崛起，活动已不仅仅只做PC端的活动，还要兼容移动端的活动。

倒计时活动虽然外表发生了变化，其核心思路万法不离宗，直接平移到移动端。奈何，移动端有其的特殊性：手机长时间静放，自动息屏。

问题就出在息屏后，倒计时显示的时间发生了错乱，一切变的不那么美好了。

JSvar remainTime = 100; //倒计时活动，剩余多少秒
var cacheTime = new Date.getTime();//程序进入后，缓存时间节点
setInterval(function () {
    var currTime = new Date.getTime()
    var vanishTimie = currTime - cacheTime; //获得消失的时间
    var newRemainTime = remainTime - vanishTimie/1000; //getTime()，获取的毫秒
    console.log('newRemainTime',newRemainTime);
    //do somthing
}, 1000)

通过 cacheTime 与 currTime 相减，获取已经消失的时间; remainTime 与 vanishTimie 再次相减，获得最终的剩余时间。

除了使用时间节点相减，获取时间差，还可以利用 ajax 异步请求，向服务器获取最新的数据。两者各有利弊，如何使用，请根据场景需求，做出合理的选择。