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

Question

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

如果我循环通过x()，说100次需要＆lt; 1ms（平均/通话）执行它 但是，如果我setInterval(x, 100)，则平均需要＆gt; 150ms执行

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

是否有任何技术/模式可以确保我的计时器以同一时间间隔（以低间隔）被触发并且在给定的时间间隔而不受浏览器的支配？

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

更新2：感谢lincolnk，我已经更新了代码，任何人都可以查看http://jsfiddle.net/zQQgH/22/

Answer 1

不，你无法控制这个非常完美。

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

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

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

还有可能使用RequestAnimationFrame（此博客文章还有一些关于如何使用setInterval / setTimeout进行动画的额外信息）。保罗爱尔兰写了一个简单的polyfill for RequestAnimationFrame。

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

Answer 2

我建议您在回调中使用setTimeout。