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

【问题标题】：How to make a simple counter work when the tag is inactive标签处于非活动状态时如何使简单的计数器工作
【发布时间】：2022-01-25 15:05:48
【问题描述】：

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

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

&lt;div&gt;0&lt;/div&gt;

我发现当我切换到另一个标签时，setInterval 将不起作用。

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

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

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

感谢您的回复！

【问题讨论】：

标签： javascript setinterval

【解决方案1】：

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

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>

【讨论】：

欣赏答案，但问题是 setInterval 似乎没有以正确的方式工作。您将setInterval 设置为 1 毫秒，但它的更新速度远低于 1 毫秒。

【解决方案2】：

如今，您应该预料到您的任何 JavaScript 都可能随时停止或严重限制。造成这种情况的原因通常是节能措施，但甚至可能是安全缓解措施（以近年来的侧信道攻击为例）。

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

因此，如果在 1 秒时您的 textContent 应该等于“A”，而在 2 秒时应该等于“AB”等等，那么您需要假设计时器可能根本不会从1秒，一路说10秒。因此，在 10 秒时，您确定文本内容应该是“ABCDEFGHIJ”，并显示它……即使您从未显示过中间值。

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

【讨论】：