Javascript sleep ....setTimeout 从 setInterval javascript

Question

setTimeout 是否在 setInterval 内工作？

我正在为一个奇怪的艺术项目编写一些 JavaScript 来为一些 DOM 元素设置动画。对我来说解释问题的最好方法是举个例子:

我有 50 个不同的 div，需要使用 setInterval 更改它们在屏幕上的位置来为其设置动画。我需要每个 div 以不同的速度移动。

我计划使用的解决方案是在较大的 ChangePosition 函数中添加一个 sleep 函数，这样我就可以为每个 div 传递不同的 sleep 值。这样，我可以通过字典为每个 div 分配唯一的移动速率。

我遇到的问题是 JavaScript 没有“ sleep ”。它只有 setTimeout，它似乎在我的 setInterval 循环中不起作用。

Answer 1

setTimeout() 在 setInterval() 内部完美工作，但由于您试图模拟 sleep()，而 javascript 却无法做或有，在我看来，当 setTimeout() 异步工作时，您正在尝试编写同步代码。您将需要重新考虑如何编写代码来执行此操作。

发布您的一些代码，我们可以提供更具体的帮助。

我不完全确定我遵循了你想要做的事情，但是通过为每个对象使用单独的计时器，以不同的速率为 N 个不同的事物设置动画可能是最简单的。然后，每个对象的计时器都可以按照自己的速率进行设置，并检测其自身的完成情况，而您不必从某个中央计时器来管理它们。

此外，如果您使用 JavaScript 从头开始​​编写动画例程，那么您所做的工作将超出您的需要。这个问题已经被解决了数千次，没有理由你必须自己重新发明它。在 Google 上简单搜索“javascript 动画示例”，就会显示各种示例和大量代码，您可以以此为基础。这是一个很好的教程:http://javascript.info/tutorial/animation .

像 jQuery 这样的流行库有各种内置的动画函数，它们也可以为你做很多脏活。动画也可以在现代浏览器(IE 除外)中使用 CSS3 来完成。