不会停下的setInterval

Posted by 甘家城 on 2017-12-07 Viewed times

关于定时器,如果把浏览器最小化或者看其他页面的时候,页面都会处于未激活状态,也就是对于chrome定时器会变1s运行一次,手机定时器则会直接暂停。

比如运行如下代码,页面切到后台的话,定时器chrome会变一秒变一次,手机则会暂停。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test js</title>
</head>
<body>
    <script type="text/javascript">
        var time=0;
        setInterval(function(){
            time++;
            document.write(time+" ");
            document.title=time+" ";
        },100);
    </script>
</body>
</html>

然后先尝试一个web worker实现的不停下的setInterval,类似于让定时器部分js在后台运行,这样就可以一直运行定时器,前台收到msg展示即可。下面是html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var worker = new Worker("worker.js");

        // 向worker.js发送信息
        worker.postMessage( 'hello world' );

        // 接收从worker.js发送的信息,存储在event.data中
        worker.onmessage = function(event){
            document.write(event.data+" ");
            document.title=event.data+" ";
        }

        // 报错信息
        worker.onerror=function(error){
            console.log(error.filename,error.lineno,error.message);
        }
    </script>
</body>
</html>

下面是web worker的js部分。

onmessage = function(event){
    var data = event.data;
    var time=0;
    setInterval(function(){
        // 向前端页面发送信息
        postMessage(time);
        time++;
    }, 100)
}

再来一种比较奇妙的实现,主要参考这里

通过mate的refresh和setInterval的配合实现。不过这个好像最小只能实现一秒。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="2" id="refresh">
    <title>123</title>
</head>
<body>
    <script type="text/javascript">
        var meta = document.getElementById("refresh");
        var time = 0;
        setInterval(function() {
            meta.content = meta.content;
            document.title=time+" ";
            document.write(time+" ");
            time++;
        }, parseInt(meta.content / 2) * 1000);
    </script>
</body>
</html>

最后再扯扯这个问题的初衷,一次面试被问到页面定时器显示时间由于会停止,后台运行(最小化)后回来时间不对了怎么办。

这个容易调入上面的陷阱,想着怎么让定时器持续运行,其实只要setInterval获取系统时间便可以。即使停了回来也会运行一次获取到系统时间。代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time</title>
</head>
<body>
    <div id="time"></div>
    <script type="text/javascript">
        setInterval(function(){
            document.getElementById("time").innerHTML=new Date().toString();
        },1000);
    </script>
</body>
</html>

That’s all;


版权声明:本文为原创文章,转载请注明出处和作者,不得用于商业用途,请遵守 CC BY-NC-SA 4.0协议。

支付宝打赏 微信打赏

赞赏一下