Parallel data loading

For http://stackoverflow.com/q/4158102/445073

HTML

<h1>Parallel Version</h1>
<p>Experiments for <a href="http://stackoverflow.com/q/4158102/445073">stackoverflow question</a> pulling <a href="https://github.com/daybarr/testdata/blob/master/ten-k-rows/demo.response.json">JSON data from github</a>.</p>
<p>
<ul>
    <li>Number of files (40-100): <input id="numfiles" type="number" max="100" min="40" value="1" /></li>
    <li>Number of parallel loads (2-100): <input id="numparallel" type="number" max="100" min="2" value="5" /></li>
</ul>
<button id="go">Load!</button>
</p>
<div id="countdown"></div>
<div id="output"></div>

CSS

h1 {font-weight: bold;}
h1, p, div, ul {margin-bottom: 0.8ex;}

JavaScript

$(function() {
    var BookData = {},
        BookIndex = 'something';
    BookData[BookIndex] = [];
    
    $('#go').click(function() {
        //$('#go').attr('disabled', true);
        var numFiles = parseInt($('#numfiles').val(), 10);
        var numParallel = parseInt($('#numparallel').val(), 10);
        var inFlight = 0;
        var start = new Date().getTime();
        var loadFile = function() {
            $('#countdown').text(''+numFiles+' files remaining');
            if (numFiles) {
                numFiles -= 1;
                while (inFlight < numParallel) {
                    inFlight += 1;
                    $.getJSON('/gh/get/response.json/daybarr/testdata/tree/master/ten-k-rows/', function(json) {
                        Array.prototype.push.apply(BookData[BookIndex], json);
                        loadFile();
                        inFlight -= 1;
                    });
                }
            } else {
                var duration = new Date().getTime() - start;
                $('#output').text("Took " + duration + " ms to load " + BookData[BookIndex].length + " entries");
            };
        };
        loadFile();
    });
});