Javascript : testing two asynch calls before going to third function?

So I have two asynch calls going out to a webservice... both of them are needed for my third method.

How would开发者_JS百科 you guys suggest doing this?

I tried setting a flag in one of my methods (the other method calls the third method and send in some data) ... so in my third method I tried this:

 thirdMethod: function (returnedData) {

        if (this.secondFunctionReturned != true) {
            setTimeout(this.thirdMethod, returnedData, 100);
        }
        else {}

But this timeout did not work (it didnt pass the data for me) -- just wondering what you guys think ... and thanks.

---

Presumably you're getting data back from each of the async calls and that's why you need them before firing your third. I'd have each of the async callbacks check to see if all required data is present and, if so, fire off your third function. Or you could use a counter, but again, presumably you have data already and the counter would just be unnecessarily additional.

Pseudo:

var dataFromCall1, dataFromCall2;

startAsync(function(data) {
    dataFromCall1 = data;
    if (dataFromCall2) {
        thirdFunction(dataFromCall1, dataFromCall2);
    }
});

startOtherAsync(function(data) {
    dataFromCall2 = data;
    if (dataFromCall1) {
        thirdFunction(dataFromCall1, dataFromCall2);
    }
});

Or less coupled:

var dataFromCall1, dataFromCall2;

startAsync(function(data) {
    dataFromCall1 = data;
    nextStep();
});

startOtherAsync(function(data) {
    dataFromCall2 = data;
    nextStep();
});

function nextStep() {
    if (dataFromCall1 && dataFromCall2) {
        thirdFunction(dataFromCall1, dataFromCall2);
    }
}

Or the counter:

var counter = 0;

startAsync(function() {
    // ...presumably some processing here...

    // Possibly fire next step
    handleCompletion();
});

startOtherAsync(function() {
    // ...presumably some processing here...

    // Possibly fire next step
    handleCompletion();
});

function handleCompletion() {
    if (++counter === 2) {
        thirdFunction();
    }
}

---

Update:

Regarding the question in the comments below:

I tried this once then thought about the one instance that both of these return at the same time... couldn't there be a situation where this would fail if they both returned at the exact same time?

Good question, I should have addressed that originally: No, there is no possibility of both calls occurring simultaneously. JavaScript in web browsers is single-threaded (barring the explicit use of web workers, and even then interactions between the threads are explicit). If the callback for the first call is in progress when the second call completes, the second callback will be queued and only run when the first callback returns.

---

I vote for the counter method in T.J. Crowder's answer.

But, another option that hasn't been suggested is instead of doing two calls at once and then trying to sync that up with the third, do the calls one at a time. That is, make the first async call and in its callback make the second async call and then in its callback make the third call. (T.J.'s counter method is much more scalable.)

Regarding the problem you mentioned where the timeout didn't pass the data for you, that's because you're trying to pass too many arguments to setTimeout. You need to do it something like this:

setTimeout(function(){ this.thirdMethod(returnedData); },
           100);