Sequential data loading

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

by daybarr

HTML

<h1>Sequential 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="50" /></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);
        $.getJSON('/gh/get/response.json/daybarr/testdata/tree/master/ten-k-rows/', function(json) {
            Array.prototype.push.apply(BookData[BookIndex], json);
            var duration = new Date().getTime() - start;
            $('#output').text("Took " + duration + " ms to load " + BookData[BookIndex].length + " entries");
        });
    });
});