Question

I am working on coding for a situation where I need to construct a function of nested callbacks of an unknown length. It is to create a sequenced animation queue to move an element across an unknown # of positions.

For example, output would look something like this with X ‘complete’ callbacks nested inside:

$('#element').animate(css, { complete: function () {
          $('#element').animate(css, { complete: function () {
              // more nested calls inside
          }
});

Right now I am generating these functions as a string, and then once completed, feeding it to new Function():

myFunc = new Function(generatedFuncString);

The content is trusted but this still uses eval() which has negative performance implications. I was just wondering if there is another/better way?

edit: The reason I am doing it this way is because I have a very complicated set of animations to perform and am working outside of the jQuery animation queue. If anyone has a better suggestion for how to accomplish a situation like this that would be helpful…

Imagine a baseball diamond with a runner(A) on 1st and a runner(B) on 3rd. In one animation bundle, I want to animate runner A to 3rd (stopping at 2nd in the middle, 2 advances), and runner B to HOME (1 advance).

I have to fire-off the initial advance with ‘queue: false’ so that runner A and B move to their first base at the same time (runner A to 2nd, runner B to home).

When Runner A is done moving to 2nd, I want to then move him to 3rd (hence constructing a animate() call with nested callbacks pro grammatically to ensure this sequencing is preserved).

The reason I am constructing the function via string is because I know what the inner-most callback is going to be first, and then recursively constructed 1 or more outer-callbacks from there. I couldn’t figure out a way to do this by working with functions as objects and keeping all of the references in tact.

Keep in mind this is a simple example. Imagine a situation where the bases are loaded, and I need to animate a grand slam (all 4 runners circle all bases, runner originating at home needs to make 3 stops before running back to home). Etc etc.

Answer 1

Answering the question you ask in your title: You can create functions from strings via eval, new Function, and by inserting a script element with the text you want. But it all comes to the same thing: Firing up the JavaScript parser and creating the function.

But rather than nesting, I think you want chaining. Build a list of the animations in an array, and use the animate callback to call the next animation in the array. Something like:

var animations = [
    /* css for first animation */,
    /* css for second animation */,
    /* etc. */
];
var index = 0;

function runAnimation() {
    if (index < animations.length) {
        $("#element").animate(animations[index++], runAnimation);
    }
}

You’d build up the array dynamically, of course.

---

gdoron points out in the comments that if all of your animations are on the same element, it can be even simpler:

var animations = [
    /* css for first animation */,
    /* css for second animation */,
    /* etc. */
];
var index = 0;

for (index = 0; index < animations.length; ++index) {
    $("#element").animate(animations[index]);
}

…because when you call animate multiple times on the same element, by default the animations queue up (the queue option defaults to true; sadly the docs don’t seem to say that). My code example above doesn’t rely on the queue, and so in theory each entry in the array could be an object with a property for the selector for the elements to animate and the css to apply. But if it’s all one element, you can just use a straight loop.