關(guān)于定時器，如果把瀏覽器最小化或者看其他頁面的時候，頁面都會處于未激活狀態(tài)瓦阐，也就是對于chrome定時器會變1s運行一次，手機定時器則會直接暫停篷牌。
比如運行如下代碼睡蟋，頁面切到后臺的話，定時器chrome會變一秒變一次枷颊，手機則會暫停戳杀。關(guān)于定時器，如果把瀏覽器最小化或者看其他頁面的時候夭苗，頁面都會處于未激活狀態(tài)信卡，也就是對于chrome定時器會變1s運行一次，手機定時器則會直接暫停题造。
比如運行如下代碼傍菇，頁面切到后臺的話，setInterval定時器在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實現(xiàn)的不停下的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發(fā)送信息
worker.postMessage( 'hello world' );
// 接收從worker.js發(fā)送的信息，存儲在event.data中
worker.onmessage = function(event){
document.write(event.data+" ");
document.title=event.data+" ";
}
</script>
</body>
</html>
下面是web worker的js部分渊鞋。
onmessage = function(event){
var data = event.data;
var time=0;
setInterval(function(){
// 向前端頁面發(fā)送信息
postMessage(time);
time++;
}, 100)
}
再來一種比較奇妙的實現(xiàn)绰更，主要參考這里。
通過mate的refresh和setInterval的配合實現(xiàn)锡宋。不過這個好像最小只能實現(xiàn)一秒儡湾。
<!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>
最后再扯扯這個問題的初衷，一次面試被問到頁面定時器顯示時間由于會停止执俩，后臺運行（最小化）后回來時間不對了怎么辦徐钠。
這個容易調(diào)入上面的陷阱，想著怎么讓定時器持續(xù)運行役首，其實只要setInterval獲取系統(tǒng)時間便可以尝丐。即使停了回來也會運行一次獲取到系統(tǒng)時間。代碼如下
<!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衡奥；
