(1) Is there a non-iterative solution? What I also want to know is how to perform a series of actions one after another.
Take a look at $.deferred() and friends. deferred.then() is tailor-made for this. And very clear to the reader what is going on. Note: I am using the jquery.timeout plugin below, very handy for this sort of thing! From my own code:
function resize() {
$.timeout(PAINT_TIMEOUT) // Let browser re-paint after resize
.then(resizeContent)
.then(resizeCanvas)
.then(function() { sketch.redraw(true); });
}
To make this work, your functions should each return a promise. In this case notice I use the $.timeout() plugin, which returns a promise.
function resizeContent() {
// Do stuff here
return $.timeout(PAINT_TIMEOUT);
}
It turns out that lots of jQuery functions return handy promises. For example, $ajax() and friends. And the animation functions have a handy .promise() method. See the docs.