如何使一个简单的计数器在标签处于非活动状态时工作

Question

我有一个简单的计时器来记录时间：

let div = document.querySelector('div')
let interval = window.setInterval(function(){
div.textContent =parseFloat(div.textContent)+1
},1)

<div>0</div>

我发现当我切换到另一个选项卡时，setInterval将不起作用。

有什么简单的解决方案可以解决这个问题吗？

我确实做了一些研究，比如，人们建议使用window.requestAnimationFrame，但它不起作用。

有没有一些简单的解决方案或内置功能来解决这个问题(我只想做一个简单的计时器(？

感谢您的回复！

Answer 1

现在，您应该预料到任何JavaScript都可能随时被暂停或严重抑制。造成这种情况的原因通常是节能举措，但也可能是安全缓解措施(在近年来发生的侧信道攻击的情况下(。

如果计时器与显示的内容有关，则requestAnimationFrame()是正确的解决方案。但是，您需要使用系统计时器来确定经过的时间量，以决定显示什么。

因此，如果在1秒时，你的textContent应该等于"A"，在2秒时，它应该是"AB"，依此类推，你需要假设计时器可能从1秒开始根本不运行，一直到10秒。因此，在10秒时，您确定文本内容应该是"ABCDEFGHIJ"，并显示。。。即使您从未显示中间值。

也许图形/游戏开发是一个更好的例子。如果游戏的帧速率从60 FPS下降到10 FPS，那么游戏的移动速度现在不会慢6倍。只是显示的帧较少。(这当然忽略了早期为特定CPU编写的游戏，并取决于它们控制游戏时间的时机。(

Answer 2

您可以使用网络工作者，这里有一个演示

let div = document.querySelector('div')
var blob = new Blob([document.querySelector('#worker').textContent]);
var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function() {
div.textContent =parseFloat(div.textContent)+1
}

<div>0</div>
<script id="worker">
setInterval(function() { postMessage(''); }, 1);
</script>