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

Answer 1

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.