JS 倒计时问题,手机网页后台运行时，js会暂停

Question

JS 倒计时问题,手机网页后台运行时，js会暂停。但是时间还在走，当用户返回主界面的时候倒计时就不准了。这个有什么办法解决吗

Answer 1

有个visibilitychange事件，浏览器标签页被隐藏或显示的时候会触发.隐藏时记录时间戳，显示时记录时间戳，求二者之差/1000得到离开时间。
这是我的想法，没测试过，不知道能否成功，只是一个建议，你可以试一试

var start,end,s;
      document.addEventListener('webkitvisibilitychange', function () {
        if (document.webkitVisibilityState == 'hidden') {
            start = new Date().getTime();
            } else {
            end = new Date().getTime(); 
                s = ((end-start)/1000);    //为秒         
            }
        });
        document.addEventListener('mozvisibilitychange',function() {
            if (document.mozVisibilityState == 'hidden') {
                start = new Date().getTime();
            } else {
            end = new Date().getTime(); 
                s = ((end-start)/1000);
            }
        });

当然只是倒计时的话你可以判断visibilityState =='visible'里面重新获取时间戳，重启倒计时

Answer 2

首先计算出预计结束时间。
假如需要倒计时10秒，那么结束时间就是 当前时间戳 + 10秒。
网页后台运行，重新打开的时候，用预计结束时间 - 当前时间戳。

（非专业前端，想法仅供参考）

Answer 3

我测试过用webworker去开定时器是不会停的，提供一个思路而已

Answer 4

使用JS计时确实会存现这种问题，js脚本在浏览器出处后台情况时是全部暂停执行的，有些浏览器在tab切换也会暂停，包括setInterval和webworker不管是同步还是异步，那么解决方案也有很多种，需要根据你的实际项目情况来定
比如一个很简单的30秒倒计时任务，后台js停止执行，但系统时间是不会停止的。建议使用系统时间做比对，简码如下

let st = Date.now(),
    i = 0,
    itv = setInterval(()=>{
        i = ~~((Date.now() - st)/1000);
        if(i >= 3){
            clearInterval(itv)
            alert('time over')
        }
    },1000);

Answer 5

这个一般不是获取当前时间么，就算停了，等在运行的时候还是从当前时间倒计时，也是准确的啊

Answer 6

你这个问题可以试一下用这个 js 来尝试：https://github.com/leeenx/tim...

使用 timer.setTimeout & timer.setInterval 替代原生的 setTimeout & setInterval 试一下。具体的 API 如下： https://github.com/leeenx/tim...

这个 timer 是用 RAF 模拟的。当 js 挂起时，它也会挂起。

Answer 7

记录时间戳，每过一秒计算一次当前时间和时间戳的差值

Answer 8

多一种思路希望能开阔以下、可能变复杂了、
记录每次登录进来的时间、再运算

Answer 9

之前的答案理解错了。。。