覆盖非活动选项卡的setTimeout行为

Override setTimeout behaviour for inactive tabs

本文关键字：setTimeout 行为非活动选项覆盖更新时间：2023-09-26

我目前正在使用WebRTC开发一个JavaScript的点对点游戏。它将其中一个对等体(即主机)作为服务器，任何其他加入的对等体通过node.js代理服务器连接到主机。

我目前正试图解决一个问题，如果主机切换标签，使游戏不再是活动标签，游戏就会停止更新。在做了一些研究之后，我发现这是因为我使用了如下命令:

setTimeout(callback, 1000 / 60);

在我的游戏循环中。setTimeout(至少在Chrome和Firefox中，这是我所关心的浏览器)的定义是，如果调用它的页面不在您的活动选项卡中，则可以每秒最多调用一次。

我读到Web worker没有这个限制，但是为了使这个工作，我需要在Web worker中运行我所有的游戏逻辑。我尝试使用JSON.stringify()将我的游戏对象发送给工作人员，但它说该对象有一个循环引用(在游戏循环中)，它无法转换为JSON。所以我不知道该怎么做。

我还研究了实现我自己的定时器，无论页面是否在活动选项卡中都保持运行，但我不确定如何做到这一点。

我用这两种方法都没有问题，甚至用我还没有想到的其他方法也没有问题，只要它不会带来很大的性能开销。如有任何建议，不胜感激。

所以，正如我上面所说的，Web worker可以调用setTimeout()，而不需要为非活动选项卡延迟1秒。我的解决方案是创建一个Web Worker，它只负责调用setTimeout()(在其onmessage事件侦听器中调用)。然后，在每个游戏循环结束时，我调用:

this.worker.postMessage(null)

可以认为，给Web Worker更多的责任比仅仅调用setTimeout()更有效，因为我已经添加了等待消息在主线程和Worker之间发送的开销。这是我将来可能会考虑的事情。

这样做的主要问题是与IE的兼容性;IE直到10.0版本才得到对web工作者的支持。这不是我真正关心的，但我认为这是值得一提的。