views:

337

answers:

3

...or more specifically, how are they able to create animations via javascript, which is synchronous, without holding up the next javascript statement.

It's just a curiosity. Are they using a chain of setTimeout()? If so, are they set early, each one with a slightly longer duration than the previous, and running parallel? Or are they being created through a recursive function call, therefore running in series?

Or is it something completely different?

+4  A: 

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

Marius
Ok. I hadn't considered `setInterval()`. So if I create an animation with a duration of 1000, the duration of the `setInterval()` in jQuery is being set at 1, and is being cleared after 1000 calls. Or something like that?
patrick dw
@patrick yes it's something like that - the interval is probably a little longer than 1ms, and I think that IE has a minimum interval of something like 15ms or so anyway. (Can't remember whether that means it rounds down to 0ms or rounds up to 15ms :-)
Pointy
So I suppose they do some math, dividing the duration by the minimum milliseconds, probably dividing again by the 'distance' of the animation, and moving the target element 1px per function call. Does that sound close?
patrick dw
jQuery also has different easings, so you can have it accelerate into or out of the animation. With a plugin you can have mor complex easings, like bouncing into place, or rubberbanding into place. These all change the step between each interval using some mathematical formula instead of simply doing linear motion.
Marius
+4  A: 

With jQuery 1.4.2 on lines 5534 - 5536:

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

Notice the setInterval for jQuery's tick method that triggers a step in an animation.

aefxx
@aefxx - Thank you for the specific line references.
patrick dw
+1  A: 

Chained calls to setTimeout aren't really "recursive". If one setTimeout function, when called, sets up another timeout with itself as the handler, the original invocation will be long gone by the time the new timeout occurs.

Using setTimeout instead of setInterval is (to me) often more flexible because it lets the timed code adapt (and possibly cancel) itself. The general pattern is to set up a closure around the setTimout call so that the data needed by the timed process (the animation, if that's what you're doing) is available and isolated from the rest of the app. Then the timeout is launched on its initial run.

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

Pointy
Yeah, I think that's what I meant by recursive. Having the setTimeout in a function call that, in turn, gets repeatedly called by that setTimeout's function (until complete).
patrick dw