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

Posted 2023-05-01

JS 倒计时问题,手机网页后台运行时，js会暂停。ajax从后端获取一个时间，然后setTimeOut() 执行，时间为0的时候会再次发出请求。 但是 如果 用户返回主界面的时候 js会暂停运行，这样倒计时就不准了。 想通过用户返回界面的时候 发出请求，但是不知道应该注册什么事件， 或者有其他替代方案，
在PC上没有问题 ，问题主要出在 手机用户 的浏览器 在后台运行 的时候 页面的js会暂停， 当用户再次调出 浏览器的时候 js继续执行，但是 时间就不对了。想要在用户重新调出浏览器的时候去获取最新的时间。 不用知道js上有没有 类似安卓 onResume和onPause 。或者其他解决方法

如果我答得好请给我一点分

在html5中document新增了一个事件 visibilitychange,这个事件在页面前台或后台切换时被触发，你所说的问题就简单了，它也有个对应的属性visibilityState,用于检测当前页面的状态值为hidden还是visible。

解法是，在hidden时记录当前时间，在visible时用当前时间减去之前记录的时间就为当前倒计时需要减去的时间，这也就不需要和后台沟通了，或者你直接在visible时刷新页面也行，下面是小样，你测试一下

var b=getTime();

function getTime()

return Date.now();





document.addEventListener('webkitvisibilitychange',function()


if(document.webkitVisibilityState=='hidden')

b=getTime();

else

document.body.appendChild(document.createTextNode('间隔:'+(getTime()-b)))






)
document.addEventListener('mozvisibilitychange',function()



if(document.mozVisibilityState=='hidden')

b=getTime();

else

document.body.appendChild(document.createTextNode('间隔:'+(getTime()-b)))





)

参考技术A 从后台页面那里穿一个参数过来，可以通过URL 当然你有其他办法也行， 然后在首页的window.onload函数读取地址栏的参数window.loaction.href.search='传的值' !=-! 这样就知道用户是从后台来的了 至于你那个后台的setTimeOut 如果已经离开后台那个页面了 后台页面的JS自然就消失了，估计你是想要他不消失这个功能吧？ 可以用这个办法检测。 参考技术B 获取系统最新时间？、
js里用new Date();不行吗?
参考：
http://hi.baidu.com/wjx_5893/item/bc53ecf3aca75a0a85d2783d

setTimeOut是定时函数
理论就执行一次
可以用setInterval 这个是循环执行函数追问

不是获取 系统时间，而是获取 服务器时间 ，不是setInterval 的问题，问题是如何在 浏览器 从后台调出来的时候如何去后端请求数据。

追答

用ajax获取后台数据
$.ajax(
//传输方式
type: "POST",
dataType: "json",
//触发地址
url: "/Handler/Handle.ashx",
cache: false,
//传递参数
data: action: "GetDate" ,
//错误
complete: function ()

,
error: function (msg)
,
//成功
success: function (data, status)

);
网上搜索下就行了

追问

问题在于什么时候触发这个ajax 事件 。 setInterval 在 浏览器切到后台的时候会暂停运行的。就会导致应该触发的时候没去触发。

IOS微信后台运行时候倒计时暂停问题

链接：https://pan.baidu.com/s/1i7cSkqL 密码：g80i

　　最近给央视做了个H5答题游戏，但在倒计时上遇到一个终端问题：手机端按Home键将微信收入后台之后，IOS11 会继续跑JS五秒钟，注意是5秒，也就是倒计时9的时候收到后台，等1分钟再打开，JS会从4开始倒计时。 听说IOS6的时候能跑10分钟，IOS7有3分钟，IOS11只有5秒....但TM就是个BUG，得改啊（PS，安卓10s能正常跑，我也没试过能跑几秒，也许这就是安卓软件开多了卡爆的原因）。我的选择是获取当前时间戳来解决这个问题，具体代码分析如下：

　　

　　　　　　function Time_a() {
                var time = 10;
                $(".time").text(time);
                var t = setInterval(function() {
                    if(time == 0) {
                        clearTimeout(t);
                    } else {
                        time--;
                        $(".time").text(time)
                    }
                }, 1000)
            }

　　当用time--;来倒计时的时候，在IOS11上面就会出现倒计时断层。因此我选择使用时间戳，再配合后台的时间限制，就可以解决IOS的后台运行时间限制。

　　　　　　function Time_b(){
                var time=10;
                var beginTime=new Date().getTime();
                $(".time-a").text(time);
                var t= setInterval(function(){
                    var newTime=new Date().getTime();
                    var dTime=(newTime-beginTime)/1000;
                    dTime=parseInt(dTime);
                    time = 10-dTime > 0 ? 10-dTime : 0;
                    $(".time-a").text(time);
                },1000)
                
            }