Question

I have two functions here say animation1 and load1 they work like that:

function animation1() {
    element.animate({width(size)});
}

and

function load1() {
    element.find('img').after(newImg)
}

there’s a click event who fires both, but how can I tell to load1 to wait until animation 1 has finished the animation and then add the newImg element? I know I can callback load1 into animate() of animation1, but I’ve separate one from another because I’m reusing animation1 in a lot of places. What happens now is that both are fired together, and it’s not nice to the eyes.

thank you

d.

Answer 1

Two options:

Use a callback

I know you’ve said

I know I can callback load1 into animate() of animation1, but I’ve separate one from another because I’m reusing animation1 in a lot of places.

…but a callback really is the best way to do this. In the places where you don’t need a callback, just don’t pass one to animation1.

Modify animation1 to accept a callback, which it passes to the animate function, which accepts a “completion” callback it fires when the animation is complete:

function animation1(callback) {
    // See also my comment on the question regarding `{width(size)}`
    element.animate({width: size}, callback);
}

…and then your click would pass in a reference to load1 to animation1 rather than calling it directly, like this:

function clickHandler() {
    animation1(load1);
}

See the animate docs for details of the completion function.

Use a timer

If you tell animation1 exactly how long to take, you could use setTimeout to delay your call to load1:

function animation1(duration) {
    // See also my comment on the question regarding `{width(size)}`
    element.animate({width: size}, duration);
}

…and then your click would pass in a duration to animation1 and use setTimeout to delay calling load by the same amount:

function clickHandler() {
    animation1(400);
    setTimeout(load1, 400);
}

Of the two, I’d definitely go for the callback rather than the setTimeout barring some other design constraint.