简体繁体 English

Javascript sleep…setInterval JavaScript中的setTimeout

[英]Javascript sleep …setTimeout from within setInterval javascript

原文 2012-04-01 09:13:24 5 2 javascript

Does setTimeout work from WITHIN setInterval ? setTimeout是否可以在WITHIN setInterval ？

I'm writing some JavaScript to animate some DOM elements for a strange artistic project. 我正在编写一些JavaScript来为一个奇怪的艺术项目制作一些DOM元素的动画。 The best way for me to explain my question is to give an example: 对我来说，解释问题的最好方法是举一个例子：

I have 50 different divs that I need to animate by changing their position on screen, using setInterval . 我有50个不同的div，我需要使用setInterval更改它们在屏幕上的位置来进行动画处理。 I need each div to be moving at a different rate. 我需要每个div以不同的速度移动。

The solution I planned to use was to have a sleep function within my larger changePosition function, so that I could pass a different sleep value for each div. 我计划使用的解决方案是在更大的changePosition函数中包含一个sleep函数，以便为每个div传递不同的sleep值。 This way, I could assign a unique rate of movement for each div via a dictionary. 这样，我可以通过字典为每个div分配唯一的移动速率。

The issue that I'm having is that JavaScript does not have "sleep". 我遇到的问题是JavaScript没有“睡眠”状态。 It only has setTimeout , which does not seem to be working from within my setInterval loop. 它只有setTimeout ，但似乎在我的setInterval循环中无法正常工作。

2 个解决方案

setTimeout() works perfectly inside of setInterval() , but since you're trying to emulate sleep() which javascript does not do or have, it sounds to me like you are trying to write synchronous code when setTimeout() works asynchronously. setTimeout()在setInterval()内可以完美地工作，但是由于您正在尝试模拟JavaScript不存在或没有的sleep() ，所以听起来像是您在setTimeout()异步工作时尝试编写同步代码。 You will need to rethink how you write your code to do this. 您将需要重新考虑如何编写代码来做到这一点。

Post some of your code and we can help a lot more specifically. 发布您的一些代码，我们将为您提供更多帮助。

I'm not entirely sure I follow what you're trying to do, but it's probably easiest to animate N different things each at a different rate by just using a separate timer for each object. 我并不完全确定我会遵循您的工作，但是通过为每个对象使用单独的计时器，以不同的速率为N个不同的事物制作动画可能是最容易的。 Each object's timer can then be set at it's own rate and detect it's own completion and you don't have to manage them all from some central timer. 然后可以按自己的速率设置每个对象的计时器并检测其自己的完成，而您不必通过某个中央计时器来管理它们。

In addition, if you're writing animation routines from scratch in javascript, you're doing a lot more work than you need to. 此外，如果您要使用javascript从头开始编写动画例程，那么您要做的工作会比您需要做的要多得多。 This problem has been solved thousands of times already and there's no reason you have to invent it yourself all over again. 这个问题已经解决了数千次，没有理由您必须自己重新发明一次。 A simple Google search for "javascript animation examples" will show all sorts of samples and plenty of code you can base yours off of. 一个简单的Google搜索“ javascript动画示例”将显示各种示例和大量代码，您可以以此为基础。 Here's a good tutorial: http://javascript.info/tutorial/animation . 这是一个很好的教程： http : //javascript.info/tutorial/animation 。

The popular libraries like jQuery have all sorts of built-in functions for animation that do a lot of the dirty work for you also. 流行的库（如jQuery）具有各种内置的动画函数，它们也为您完成了很多繁琐的工作。 Animation can also be done using CSS3 in modern browsers (other than IE). 动画也可以在现代浏览器（IE除外）中使用CSS3完成。

Maybe you are looking for jQuery delay() function? 也许您正在寻找jQuery delay（）函数？ http://api.jquery.com/delay/ http://api.jquery.com/delay/

And here: Can I use .delay() together with .animate() in jQuery? 在这里：我可以在jQuery中将.delay（）和.animate（）一起使用吗？ you can see how delay() and animate() functions works together. 您可以看到delay（）和animate（）函数如何协同工作。