Wait for ajax request inside a function : $.Deferred ? $.When ? jQuery

Question

How to wait until the ajax is done inside a deferred function ? Example :

    function action() {
        console.log('action is called');

        var deferred = $.Deferred();

        console.log('do some actions...');

        //Wait until the ajax is completed and continue script
        var myAjaxCall = ajaxCall();

        //Execute te next scripts only after the ajax done

        console.log('do some actions...');

        return deferred.promise();
    }


    function ajaxCall() {
        console.log('ajaxCall is called');

        return $.ajax('url').then(function() {
            console.log('success  ajaxCall');
        });
    }

    action().then(function () {
        console.log('after action is done and ajaxCall is done');
    });

The probleme is that he function must wait until the ajax inside is called and done and continue other scripts.

Thank you.

You never resolve the `Deferred` inside the `action` function. — adeneo, Dec 11 '16 at 19:45

score 3 · Answer 1 · answered Dec 11 '16 at 20:05

3

You can chain promise then()'s.

Also there is no need to create a new promise when $.ajax already returns one

So inside action() you can do something like:

 function action() {
    console.log('action is called'); 

    var myAjaxCall = ajaxCall();

     return myAjaxCall.then(function(result){
        // do stuff here after ajax is successfull  
     });
}

answered Dec 11 '16 at 20:05

charlietfl

170,828
13
121
150

But the action() is called inside anoter function that contain deferred. – Titeufggg Dec 12 '16 at 23:00
no idea what that means...that's not what is shown in question – charlietfl Dec 13 '16 at 01:02
Thank you anyway for your answers – Titeufggg Dec 14 '16 at 02:06

Wait for ajax request inside a function : $.Deferred ? $.When ? jQuery

1 Answers1