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

Question

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

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

<div>0</div>

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

是否有一些简单的方法可以解决这个问题？

我做了一些研究，例如，people 建议使用 window.requestAnimationFrame，但效果不佳。

是否有一些简单的解决方案或内置函数来解决这个问题（我只想做一个简单的计时器）？

感谢您的回复！

Answer 1

你可以使用 webworkers，这里有一个演示

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>

Answer 2

如今，您应该预料到您的任何 JavaScript 都可以随时停止或受到严重限制。其原因通常是节能举措，但甚至可以是安全缓解措施（在最近几年的侧信道攻击的情况下）。

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

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

也许 graphics/game 开发中有更好的例子。如果游戏的帧速率从 60 FPS 下降到 10 FPS，那么游戏运动现在不会慢 6 倍。只是显示的帧数较少。（这当然忽略了为特定 CPU 编写的早期游戏，并且取决于它们的时间来控制游戏的时间。）

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

How to make a simple counter work when the tag is inactive

javascript

setinterval