覆盖非活动选项卡的setTimeout行为 [英] Override setTimeout behaviour for inactive tabs

问题描述

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

I am currently developing a peer to peer game in JavaScript using WebRTC. It treats one of the peers (i.e. the host) as the server and any other peers who join connect to the host through a node.js brokering server.

我目前尝试解决游戏停止为每个人更新的问题，如果主机切换标签使得游戏不再是活动标签。在做了一些研究之后，我发现这是因为我使用的是：

I am currently trying to solve an issue where the game stops updating for everyone if the host switches tabs such that the game is no longer the active tab. After doing some research, I discovered that this is because I'm using something like:

setTimeout(callback, 1000 / 60);

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

in my game loop. setTimeout (at least in Chrome and Firefox, which are the browsers I'm concerned with) is defined such that if the page calling it is not in your active tab, it can be called a maximum of once per second.

我读到Web Workers没有这个约束，但为了完成这项工作，我需要在web worker中运行我的所有游戏逻辑。我尝试使用JSON.stringify（）将我的游戏对象发送给worker，但是它说该对象有一个循环引用（在游戏循环中）并且它无法转换为JSON。所以我不知道该怎么做。

I read that Web Workers don't have this constraint, but in order to make that work I would need to run all of my game logic inside the web worker. I tried sending my game object to the worker using JSON.stringify(), but it said that the object had a circular reference (in the game loop) and it couldn't be converted to JSON. So I'm not sure what to do about that.

我还考虑实现自己的计时器，无论页面是否在活动选项卡中，它都会继续运行，但是我也不确定如何做到这一点。

I also looked into implementing my own timer which kept running regardless of whether the page was in the active tab, but I'm not sure how to do this, either.

我真的没有问题这样做，或者甚至其他方式我没有'想到了，只要它不会产生很大的性能开销。任何建议都将不胜感激。

I don't really have a problem doing it either of these ways, or even some other way I haven't thought of yet, provided it doesn't incur a large performance overhead. Any suggestions would be greatly appreciated.

推荐答案

因此，正如我上面所说，Web Workers能够调用setTimeout（）而不需要非活动标签的延迟为1秒。我的解决方案是创建一个Web Worker，它只负责调用setTimeout（）（在其onmessage事件监听器中调用）。然后，在每个游戏循环结束时，我调用：

So, as I said above, Web Workers are able to call setTimeout() without the 1 second delay for inactive tabs. My solution then was to create a Web Worker which was only responsible for calling setTimeout() (called in its onmessage event listener). Then, at the end of each game loop I called:

this.worker.postMessage(null)

可以说，让Web工作者比调用setTimeout（）更有责任，因为我'已经添加了等待主线程和工作者之间发送消息的开销。这是我将来可能会看到的。

It could be argued that it would be more efficient to give the Web Worker more responsibility than just calling setTimeout(), since I've already added the overhead of waiting for messages to be sent between the main thread and the worker. This is something I might look at in the future.

这样做的主要问题是与IE的兼容性;在版本10.0之前，IE不支持Web worker。这对我来说并不是一个问题，但我认为值得一提。

The main problem with doing it this way is compatibility with IE; IE did not get support for web workers until version 10.0. This isn't really a concern for me but I think it's worth mentioning.

这篇关于覆盖非活动选项卡的setTimeout行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！