Wait for the end of TWO asynchrounous functions before firing a third (jQuery Deferred ?)

Question

I'm trying to understand jQuery's Deferred, but inspite of samples, I can't achieve what I want to do.

So, I'd like to call 2 functions asynchrounously, and, when BOTH are ended, call another one.

Here's my code

function1();
function2();

function3();

function1() and function2() make an ajax call to my ASP.NET application, and they perfectly work. They must be ended before function3() starts.

I'm reading and reading again the documentation but function3() doens't wait for the end of the two others. Could you please provide my some sample in order to I understand Deferred ? I really need them to finish an important part of my project.

Thank you very much.

BONUS QUESTION

I've read about .when deferred... It is possible to write in some <div> element something like function1() running, then function2() running etc... ?

UPDATE

More details about function1() and function2() : They are very similar, here are they body :

function function1() {
    return $.ajax({
        url         :   "@Url.Action("MyMethod", "MyController")",
        contentType :   "application/json; charset=utf-8",
        dataType    :   "json"
    }).done(function(data) { 
        $.each(data, function(index) {
            pushDatas(data[index]);
        })
    }).fail(function (result) {
        alert("function1failed");
    });
}

function pushDatas(data)
{
    if(!($.inArray(data, loadedDatas) !== -1)) {
        loadedDatas.push(data);
    }
}

UPDATE 2

The functions are called like this :

<script type="text/javascript">
    $(document).ready(function () {
        //some others asynchrounous functions

        $.when(function1(), function2()).done(function3("test"));
    }

    ...

</script>

for your bonus question, why would you want to? the console is a much better place for that kind of info, unless you really want your end-user to see it. — Kevin B, Oct 07 '13 at 21:03
Hmm, goal was to write in a
which function is exectued, but, well, I only have to overwritte the content of the div at the beginning of the function... I probably wanted to do something hard with .when() whereas it's really easy... — AlexB, Oct 07 '13 at 21:16

Kevin B · Accepted Answer · 2013-10-07T22:02:05.980

1

function1 and function2 must return promise objects for this to work. For example,

function function1 () {
    return $.ajax({...});
}

now you can use $.when

$.when(function1(),function2()).done(function3);

Edit: or:

$.when(function1(),function2()).done(function(){
    function3("test");
});

edited Oct 07 '13 at 22:02

answered Oct 07 '13 at 21:04

Kevin B

94,570
16
163
180

`function3()` is executed whereas `function1()` and `function2()` are not finished... For information, the ajax call look like `$.ajax(...).done();` there is no return. – AlexB Oct 07 '13 at 21:19
there MUST be a return, otherwise it won't work. function1 and function2 MUST return a deferred or promise object. If they don't, and you cant modify them, and they don't have a callback, there's nothing you can do. – Kevin B Oct 07 '13 at 21:27
Ok, so I have to return a `promise` object, but, 2 questions : Where do the Deferred must be declared ? As a global variable or in the function ? And do I have to `.resolve` it ? I just try both but it doesn't work, I probably forget something... – AlexB Oct 07 '13 at 21:35
well, $.ajax() itself already returns a promise object, so if you simply did `return $.ajax(..` it would work. – Kevin B Oct 07 '13 at 21:36
I tried to `return $.ajax()` but `function3`, which displays something on the screen, is still exectued BEFORE `function1` and 2 are finished. Please look at my updated question. – AlexB Oct 07 '13 at 21:45
That looks correct to me... Can you show where you used $.when? – Kevin B Oct 07 '13 at 21:49
remove `("test")`, if you want to be able to pass a param to that, you'll need to use an anonymous function there that executes function3. – Kevin B Oct 07 '13 at 21:55
I just monitored the beginning and the end of the three functions and it seems it's working, thank you very much ! Something is displayed before, but I thing the probelm is elsewhere and I will investigate to find what. Could you just please show me a example of what you call an "anonymous function there that execute function3 ?" – AlexB Oct 07 '13 at 22:07
I've seen your update, I'll try this. Thanks again ! – AlexB Oct 07 '13 at 22:08

Wait for the end of TWO asynchrounous functions before firing a third (jQuery Deferred ?)

1 Answers1

Linked