Question

I have 2 functions.

function f1() {
    $.ajax(..., success: function(response) {
        // some code executed whenever request is completed.
    }
}

function f2() {
    // my code
}

I need to call these functions one after another.

f1() // waiting until ajax request in the function is complete.
f2()

I tried $.when().then(), however it didn’t seem to work.

Answer 1

The $.ajax call returns an instance of $.Deferred which is used to track the progress of the call – that is what you need to return from your f1 function. You can then use .then(), .done() etc.

Edit in response to comments

If you want to invoke a callback within f1 as well as externally you can return the result of the .pipe method.

function f1() {
    return $.ajax(/*...*/).pipe(function() {
        //local 'done' handler
    });
}

function f2(resultFromF1Handler) {
    //...
}

f1().done(f2);