Parallel HTTP Requests

by cillay

HTML

<div id="progress">
    <span id="percent"></span>
    <div id="bar"></div>
</div>
<p id="results"></p>

CSS

#progress {
 width: 500px;   
 border: 1px solid black;
 position: relative;
 padding: 3px;
}

#percent {
 position: absolute;   
 left: 50%;
}

#bar {
 height: 20px;
 background-color: green;
 width: 0%;
}

JavaScript

var PARALLEL = true;

function verifyAllRequests (requests) {
    var results = [], i = 0, len = requests.length;
    
    var showProgress = function(c) {
        var pct = Math.ceil((c / requests.length) * 100);
        $("#percent").html(pct + "%");
        $("#bar").css('width', pct + '%');
    };
    
    if (PARALLEL) {
        var count = 0;
        for (i = 0; i < len; i += 1) {
            (function () {
                results.push(verifyRequest(requests[i], (i + 1) * 1500).then(function (d) {
                    showProgress(++count);
                }));
            })();
        };
    }
    else {
        var send = function () {
            results.push(verifyRequest(requests[i]).then(function (d) {
                showProgress(++i);
                if (i < len) {
                    send(i);
                }
            }));
        };
        send(i);
    }
    $.when.apply($, results).done(function () {
        // all requests are finished
        console.log(results);
        $('#results').append($('<div>').text('Fin.'));
    });
};

var handleResponse = function(data) {
    $('#results').append($('<div>').append($('<b>').text(data.ProductName)));
};

function verifyRequest (request) {
    var d = $.Deferred();
    $.getJSON('http://services.odata.org/V4/Northwind/Northwind.svc/Products(' + (request + 1) + ')?_ts' + Date.now(), function (data) {
        handleResponse(data)
        d.resolve(request); 
    });
    return d;
};

var requestCount = 20;
var requestArray = Array.apply(null, {length: requestCount}).map(Number.call, Number);

verifyAllRequests(requestArray);