Question

Normally, I would use a callback function passed to the ‘jQuery.getJSON’ function to do something after the server responds. In this case, I have applied event handlers on some input elements, but these handlers should only execute after the success of multiple ajax requests. Basically I need to pause the execution of the event handler until some data I expect is avaliable.

In multi-threaded languages I would do it using mutexes/semaphores, but since javascript is single threaded I wonder if something like this is possible.

Answer 1

One manual way to do this is to queue up your AJAX calls in an array, and then count the number of responses you’ve received and wait until that count matches the size of your original queue (or, alternatively, pop the call out of the queue when the response is done, and you know you have everything when the queue is of 0 size).

You would have to check whether or not you are ready to proceed with a setTimeout call.

Alternatively, you may check out Deferred support in jQuery 1.5+

EDIT: A quick and dirty example of a manual approach:

var remoteCallA = function(){
    $.getJSON('someurl', function(){
        success++;
    });
};

var remoteCallB = function(){ 
    // etc
};

var whenAllDone = function(){
    // do something when everything is done
};

var checkAllDone = function(){
    if(success === remoteCalls.length){
        whenAllDone();
    } 
    else{ 
        setTimeout(checkAllDone, 1000);
    }
};

var remoteCalls = [remoteCallA, remoteCallB];
var success = 0;
for(var i = 0, length = remoteCalls.length; i++){
    remoteCalls[i]();
}

checkAllDone();