jquery, how to run a function as soon as another function ends

Question

*Note: Re-writing question:

I am trying to write the following outside of the individual function calls:

example:

function f1(){
    do something 1
}
function f2(){
    do something 2   
}

run function 1
when done
run function 2

(See comments below for jsfiddles)

Problem is, the boxes load at the same time. Behavior SHOULD be, load red, when done, load green.

If this isn't a common method in jQuery, let me know, maybe I'm just chasing a ghost...

Answer 1

Depends on the functions.

Short answer:

For synchronous functions: Just call them one after the other.

For asynchronous functions: Depends on what makes it asynchronous.

jQuery animations? Define a callback parameter from the animation's method or from the fx queue's Promise object.

setTimeout/setInterval/something else? Most likely, the functions will need to be rewritten to provide a callback or Deferred/Promise object.

See this or this for examples.

Long answer:

According to the jsFiddles in your comments, you've got these two functions:

function firstFunction(){
    $(".one").fadeIn(1000).delay(2000).fadeOut();
}
function secondFunction(){
    $(".two").fadeIn(1000).delay(2000).fadeOut();
}

You want secondFunction to run after firstFunction, and you'd prefer not to tamper with these functions. If that's the case, there's only one solution I can think of: Get a Promise object from the element that firstFunction is animating, and then define secondFunction as a success handler:

firstFunction();
$('.one').promise().then(secondFunction);

jsFiddle

promise() returns a Promise object bound to the current animation state of that element. $('.one').promise().then(secondFunction) is essentially saying "I promise to run secondFunction when the current animation for .one is done.

If you're willing to tamper with the existing functions, you could also call secondFunction as a callback parameter of the fadeOut within firstFunction, but that's not a very elegant solution.

If you're willing to rewrite your functions, the ideal solution is to tame your async functions by using Deferreds and Promises. Here's a quick primer:

• In jQuery, a Deferred object is a special object you can use to define the success/fail state of a function. You use this inside your functions.
• A Promise object is a special object that you can use to add callbacks to those success/fail states. You use this outside your functions.

Using these tools, you can rewrite your functions to specify when they're "done," and you can give code outside your functions the ability to know when (and execute after) they're done.

Rewritten to use Deferred and Promise, the code looks like this:

function firstFunction(){
    var deferred = $.Deferred();
    $(".one").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}
function secondFunction(){
    var deferred = $.Deferred();
    $(".two").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}

firstFunction().then(secondFunction);

jsFiddle

If all your functions are written this way, you can control their execution order and have them run sequentially using then(). Here's a more thorough example:

function one(){
    var deferred = $.Deferred();
    $(".one").fadeOut(500, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function two(){
    var deferred = $.Deferred();
    $(".two").fadeOut(1500, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function three(){
    var deferred = $.Deferred();
    $(".three").fadeOut(1000, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function four(){
    var deferred = $.Deferred();
    $(".four").fadeOut(750, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function five(){
    var deferred = $.Deferred();
    $(".five").fadeOut(600, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

one()
    .then(two)
    .then(three)
    .then(four)
    .then(five);

jsFiddle