H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】JS 倒计时问题,手机网页后台运行时,js会暂停

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

回答:

有个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’里面重新获取时间戳,重启倒计时

回答:

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

(非专业前端,想法仅供参考)

回答:

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

回答:

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

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

回答:

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

回答:

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

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

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

回答:

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

回答:

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

回答:

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

本文地址:H5W3 » 【Web前端问题】JS 倒计时问题,手机网页后台运行时,js会暂停

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址