了解 JavaScript 计时器线程问题答案

【问题标题】：Understanding JavaScript timer thread issues了解 JavaScript 计时器线程问题
【发布时间】：2011-02-16 06:34:53
【问题描述】：

我开始开发一个实际上可以顺利运行的 javascript MMORPG。目前，我创建了一个演示来证明我可以移动角色并让他们互相聊天，以及看到彼此在现场移动。

http://set.rentfox.net/

现在 Javascript 计时器是我没有广泛使用的东西，但据我所知，如果我错了，请纠正我，同时发生多个 setIntervals 并不能很好地工作 b/c一个线程。

假设我想让 10 个不同的人通过使用带有 setInterval 的精灵背景定位来向怪物发射火球——该动画将需要 10 个 setInterval 来重新绘制 DOM 以改变精灵背景位置。那不是一辆大车吗？

我想知道是否有办法解决所有这些问题，也许使用 Canvas，这样动画就可以同时发生而无需创建事件队列，而且我不必担心计时器。

希望这是有道理的，如果我需要进一步澄清，请告诉我。

【问题讨论】：

我建议只使用一个 setInterval/setTimeout-Loop 并处理其中的所有内容。

标签： javascript timer dom-events settimeout setinterval

【解决方案1】：

多个setIntervals 的问题是双重的。第一个正如您所指出的，因为浏览器上的所有Javascript（当前）都是单线程的，一个计时器的执行可能会阻止下一个计时器的执行。（不过，Worker threads 即将到来；Firefox already has them 和 Safari 4 [也许还有其他]。）第二个是计时器以设定的时间间隔发生，但如果您的处理程序在该时间间隔到期时仍在运行，则第二个间隔被完全跳过。例如，计时器会干扰自己。

最后一部分需要更多解释：假设您有一个 10 毫秒的 setInterval （这是您可以合理地期望任何实现执行它的最快速度；可能会被限制，因此它们不会比这更快）。如果你的处理程序需要 13 毫秒，那么应该在它开始后 10 毫秒发生的时间间隔将被完全跳过。

我通常使用setTimeout 来处理这种事情。当我的处理程序被触发时，我会做我的工作，然后在处理程序结束时安排下一个事件。然后（在你可以确定的范围内），我知道下一个事件将在那个时间间隔发生。

对于您正在做的事情，似乎单个“脉冲”计时器是最好的，它可以完成它需要对脉冲执行的任何操作。该脉冲计时器是使用setInterval 还是setTimeout 是根据您使用实际代码看到的判断调用。

【讨论】：

你所说的“脉冲”计时器是什么意思，我能读懂这个技术吗？
@resopollution：我只是说一个计时器，你可以用它来为你的应用程序提供一个脉冲（例如，心跳）。因此，一个适用于多个字符的计时器（无论该计时器使用setInterval 还是setTimeout）。

【解决方案2】：

+1 to T. J. Crowder，答案很完美。我强烈建议学习使用 Canvas over DOM 节点来制作游戏动画；后者速度慢且有问题，并且会在任何重要的情况下挂起浏览器。 OTOH，Canvas 的速度要快得多，并且可以进行硬件加速，如果需要，甚至可以提供 3D 上下文。

【讨论】：