javascript setinterval不'；t以低间隔同步发射

假设有一个函数

x（）

，它执行一些动画

如果我循环执行

x（）

，则执行它需要<1ms（平均/调用）100次 但是，如果我执行

setInterval（x100）

则执行平均需要>150ms

由于这种怪癖，我的动画是起伏的。 （我进行for循环测试的原因是为了确保

x（）

不是瓶颈）

是否有任何技术/模式可以确保我的计时器（以较低的间隔）以给定的间隔同步启动，而不是任由浏览器摆布

更新：为什么以下内容针对不同的时间间隔给出不同的结果

---

更新2：多亏了林肯，我更新了代码，让任何人都可以查看。

我建议在回调中使用

setTimeout

。

我建议在回调中使用

setTimeout

。

不，你不能完全控制它

原因是JavaScript是单线程的，并且在一个线程中与浏览器UI一起工作。这意味着如果您写入setInterval（fn，30）。您请求浏览器每30毫秒调用一次fn。但是浏览器在这个时候不会这样做。浏览器会将您的请求添加到队列中

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

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

也可以使用（这篇博客文章还提供了一些关于如何使用setInterval/setTimeout进行动画的额外信息）。保罗·爱尔兰写了一篇简单的文章

---

如果仍然存在问题，只需使用HTML/CSS发布动画脚本即可。我可以调查这件事。

不，你不能完全控制这件事

原因是JavaScript是单线程的，并且在一个线程中与浏览器UI一起工作。这意味着如果您写入setInterval（fn，30）。您请求浏览器每30毫秒调用一次fn。但是浏览器在这个时候不会这样做。浏览器会将您的请求添加到队列中

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

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

也可以使用（这篇博客文章还提供了一些关于如何使用setInterval/setTimeout进行动画的额外信息）。保罗·爱尔兰写了一篇简单的文章

---

如果仍然存在问题，只需使用HTML/CSS发布动画脚本即可。我可以研究一下。

同意-setTimeout几乎总是比使用setInterval好。为什么？如果你打算建议一个替代方案，请提供一个理由说明为什么它更好。@lincolnk:

setInterval

尝试使用智能行为“赶上”时间范围，这意味着它可以不时跳过某些时间间隔<另一方面，code>setTimeout将执行它，而不管它何时可以到达，并且不会尝试跳过它可能错过的间隔。通常，

setInterval

的行为在大多数情况下“足够好”，但在动画场景中，

setTimeout

可能会产生更好的结果。@lincolnk的推理与Reid的推理基本相同。根据我的经验，setInterval只会带来麻烦，除非您使用相当长的间隔（秒数）。同意-setTimeout几乎总是比使用setInterval好。为什么？如果你打算建议一个替代方案，请提供一个理由说明为什么它更好。@lincolnk:

setInterval

尝试使用智能行为“赶上”时间范围，这意味着它可以不时跳过某些时间间隔<另一方面，code>setTimeout将执行它，而不管它何时可以到达，并且不会尝试跳过它可能错过的间隔。通常，

setInterval

的行为在大多数情况下“足够好”，但在动画场景中，

setTimeout

可能会产生更好的结果。@lincolnk的推理与Reid的推理基本相同。根据我的经验，除非使用相当长的时间间隔（秒数）。

setInterval（x100）

意味着

x

将每隔100ms执行一次。由于运行时间少于1毫秒，很明显，这将是一个不稳定的过程……你可以使用这个测试应用程序来查看浏览器在你要求的时间间隔内保持得有多好：在你的示例中，在计算最后一个时间间隔后，你不会用新的时间来更新

prevTime

。基本上，就连上个世纪的动画师都知道图像必须每秒更改25次才能更新有平滑的动画。1000ms/25=40ms。这意味着，为了创建明显平滑的动画，间隔函数应该触发40ms或更短的时间。当然，您的函数必须比该时间间隔执行得更快。

setInterval（x100）

意味着

x

将每100ms执行一次。由于运行时间少于1毫秒，很明显，这将是一个不稳定的过程……你可以使用这个测试应用程序来查看浏览器在你要求的时间间隔内保持得有多好：在你的示例中，在计算最后一个时间间隔后，你不会用新的时间来更新

prevTime

。基本上，就连上个世纪的动画师都知道图像必须每秒更改25次才能更新有平滑的动画。1000ms/25=40ms。这意味着，为了创建明显平滑的动画，间隔函数应该触发40ms或更短的时间。当然，你的函数必须比这个时间间隔执行得更快。时间间隔问题是IE的问题。FF和chrome有更好的计时器来处理解决方案