具有多个动画的Javascript setInterval性能下降

Question

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

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

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

Answer 1

你可以有很多setIntervals()没有问题，但要注意JS基本上是单线程的（每页）。实际上，通过跳转一个关于代码的线程来处理多个“并发”线程。

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

Answer 2

正如其他人所说，你可以尽可能多地拥有。尽管如此，您应该尽可能少以获得良好的性能。也许你可以找到一种方法，只为两个动画使用一个intervala。

如果使用全局变量，可能会出现问题。这可能会对动画产生影响（甚至可能影响动画效果，取决于你使用它们的效果）。

Answer 3

我建议使用setTimeout，它可以避免性能问题。

看一下这个问题setTimeout or setInterval?

它很好地解释了两者之间的区别以及为什么通常使用setTimeout。

Answer 4

  

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

简短回答：是的，绝对。

Answer 5

是的，运行多个setIntervals是安全的..使用setIntervals没有潜在的性能问题..配置你自己的代码，你几乎肯定会发现那里的问题。