javascript setinterval 不会以低间隔同步触发

Question

假设有一个函数 x() 可以执行一些动画

如果我循环执行 x()，比如说 100 次，执行它需要 < 1 毫秒(平均/调用)但是，如果我执行 setInterval(x, 100) ，执行时间平均> 150ms

由于这种怪癖，我的动画很不稳定。(我进行 for 循环测试的原因是为了确保 x() 不是瓶颈)

是否有任何技术/模式可以确保我的计时器在给定的时间间隔内同步触发(以低间隔)，而不是受浏览器的支配？

更新:为什么以下内容会针对不同的时间间隔给出不同的结果
http://jsfiddle.net/zQQgH/7/

更新2:感谢lincolnk，我更新了代码供任何人查看http://jsfiddle.net/zQQgH/22/

Answer 1

不，你无法控制这真正的完美。

原因是 JavaScript 是单线程的，并且在一个线程中与浏览器 UI 一起工作。这意味着如果您编写 setInterval(fn, 30) 。您请求浏览器每 30 毫秒调用一次 fn 。但浏览器不会在此时执行此操作。浏览器会将您的请求添加到队列中。

您可以找到有关此行为的更多信息 here 。

但我不认为这是主要问题，为什么你的动画不稳定。 要获得流畅的动画，您应该使用 16 到 35 毫秒之间的计时器。 (最佳动画时间应为 16.6666667。)

也可以使用 RequestAnimationFrame (这篇博文还提供了一些有关如何使用 setInterval/setTimeout 进行动画的额外信息)。 Paul Irish 写了一个简单的polyfill for RequestAnimationFrame .

如果您仍然遇到问题，只需使用有效的 HTML/CSS 发布您的动画脚本即可。我可以调查一下。