How does jQuery perform asynchronous animation?

Question

... or more specifically, how they can create animations through javascript, which is synchronous, without supporting the following javascript statement.

This is just curiosity. Do they use the setTimeout() chain? If so, are they installed at an early stage, each of which has a slightly longer duration than the previous one, and works in parallel? Or are they created using a recursive function call, so they work sequentially?

Or is it something else entirely?

Answer 1

There is an alternative to setTimeout () called setInterval (), which will call the function that you pass as an argument at regular intervals. A call to setInterval will return a value that can be passed to clearInterval to stop the call to the function.

Answer 2

With jQuery 1.4.2 on lines 5534 - 5536:

 if ( t() && jQuery.timers.push(t) && !timerId ) { timerId = setInterval(jQuery.fx.tick, 13); } 

Check out the setInterval method for jQuery tick , which launches a step in the animation.

Answer 3

The associated setTimeout calls are not really "recursive". If one setTimeout function sets a different timeout when calling itself as a handler, the original call will disappear for a long time when a new timeout occurs.

Using setTimeout instead of setInterval (for me) is often more flexible as it allows the temporary code to adapt (and possibly undo). The general scheme is to configure closure around the setTimout call so that the data needed for the synchronized process (animation, if that's what you are doing) is accessible and isolated from the rest of the application. Then the timeout starts when it is first started.

Inside the timeout handler, "arguments.callee" can be used to refer to itself and reset the timeout for subsequent "frames".