Running functions sequentially without nesting the functions - jQuery

Question

Ideally I would like to run these functions sequentially. Formatted like so:

function functionOne() {
    $('.div').animate({'height', 200}, 1000);
}

function functionTwo () {
    // ...
}

$(document).ready(function() {
    functionOne();
    functionTwo();
});

I know I can nest functionTwo inside of functionOne's 'complete' callback function (below), but I'd rather not as it can get a little messy.

function functionOne() {
    $('.div').animate({'height', 200}, 1000, function() {
        functionTwo();
    });
}

Any way around this? Cheers

No but you don't have to next functionTwo inside of the anonymous function. -- $('.div').animate({...},functionTwo); — John Kalberer
– John Kalberer, Commented Jul 28, 2011 at 22:56
I have a script that is quite large and I have functions being re-used by various events and methods. It's getting a little messy — Allan Thomas
– Allan Thomas, Commented Jul 28, 2011 at 23:00

Paul · Accepted Answer · 2011-07-28 22:58:50Z

2

Maybe you want to use:

function functionOne(callback) {
    $('.div').animate({'height', 200}, 1000, callback);
}

function functionTwo () {
    // ...
}

$(document).ready(function() {
    functionOne(function2);
});

Although in my opinion:

$(function(){
    $('.div').animate({'height', 200}, 1000, function(){
        // ...
    });
};

is more readable (depending on the size of your function2) and does the exact same thing faster.

answered Jul 28, 2011 at 22:58

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Running functions sequentially without nesting the functions - jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related