关于定时器，如果把浏览器最小化或者看其他页面的时候，页面都会处于未激活状态，也就是对于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协议。
赏
支付宝打赏
微信打赏
支付宝打赏
微信打赏
赞赏一下