How to know how many asynchronous calls are pending

Question

I'm using the following code to make multiple async. calls and I need to know how many of those calls are pending for validating purposes.

function llenarComboMetodos(cell) {
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Las llamandas asincronas no son soportadas por este navegador.");
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200 && xhr.status < 300) {
                var combo = '<select name="metodos[]">';
                var opciones=xhr.responseText;
                combo+= opciones+"</select>";
                cell.innerHTML = combo;
            }
        }
    }

    xhr.open('POST', 'includes/get_metodos.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("completar=1");

}

Is there a way to know that? Thank you (:

Answer 1

You can intercept the XMLHttpRequest.send and do your counting of active calls:

var activeXhr = (function(){
    var count = 0;
    XMLHttpRequest.prototype.nativeSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function(body) {

        this.onreadystatechange  = function(){
            switch(this.readyState){
                case 2: count++; break
                case 4: count--; break
            }
        };
        this.nativeSend(body);
    };

    return count;
})();

console.log(activeXhr);