Javascript setInterval 性能因多个动画而下降

Question

我正在使用setInterval(foo,ms)来执行动画。我真的不想在这里发布动画的所有代码，因为它跨越多个文件。基本上就是一堆图像掉落。每秒我都会调用 ctx.drawImage(img,...) 同时更新坐标以模拟重力。

我将 Canvas 分为两部分，一个动画在左侧，一个在右侧。当其中之一被激活时，帧速率稳定在 30 fps。然而，如果我同时激活它们，性能就会直线下降。这与我的计算机重载无关，因为我可以将每个动画的复杂性降低 10 倍，但问题仍然存在。我的猜测是 setIntervals 互相干扰。

我的问题是执行多个 setInterval 调用是否安全。谢谢

Answer 1

您可以使用多个 setIntervals() 而不会出现问题，但请注意 JS 基本上是单线程的(每页)。多个“并发”线程实际上是通过在代码中跳转一个线程来处理的。

这意味着计时将不一致 - 特别是如果其中一种方法需要相当长的时间来运行。