Jquery how to run a function as soon as another function ends

Depends on functions.

Short answer:

For synchronous functions: just call them one by one.

For asynchronous functions: depends on what makes it asynchronous.

jQuery animations? Define the callback parameter from the animation method or from the fx queue Promise.

setTimeout / setInterval / something else? The functions will most likely need to be rewritten to provide a callback or deferred / promise object.

See examples or.

Long answer:

According to jsFiddles in your comments, you have two functions:

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

      

        
        
        
      

    

You want to secondFunction

run after firstFunction

, and you would rather not interfere with these functions. If in this case there is only one solution I can think of: Get the Promise object from the element that is animating firstFunction

, then define it secondFunction

as a success handler:

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

      

        
        
        
      

    

jsFiddle

promise()

returns a Promise associated with the current animation state of this element. $('.one').promise().then(secondFunction)

essentially says, “I promise to run secondFunction

when the current animation is .one

complete.

If you want to interfere with existing functions, you can also call secondFunction

as a callback parameter fadeOut

internally firstFunction

, but this is not a very neat solution.

If you want to rewrite your functions, the ideal solution is to tame your asynchronous functions with Deferreds and Promises. Here's a quick primer:

• In jQuery, the Deferred object is a special object that you can use to determine the success / failure status of a function. You use this in your functions.
• The Promise object is a special object that can be used to add callbacks for these success / failure states. You use this outside of your functions.

Using these tools, you can rewrite your functions to indicate when they are "done", and you can provide code outside of your functions to know when (and after) they will be executed.

Rewritten to use pending and promises, 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 of your functions are written this way, you can control their execution order and run them sequentially using then()

. Here's a more detailed 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