Ajax Queue

by HYEONGJINKIM

HTML

<script src="http://creativecouple.github.com/jquery-timing/jquery-timing.min.js"></script>
<h1>jQuery Ajax + Deferred - Demonstration</h1>
<table>
<tr>
    <th><button id="go">Start fake requests</button></th>
    <th>iterate via nested functions</th>
    <th>iterate via repeat-loop</th>
    <th>iterate via sequential each-loop</th>
</tr>
<tr>
    <th>requests fired one by one,<br/>each time waiting for server response:</th>
    <td><ul><li>test server status</li><li>initialize server</li><li>prepare user data</li><li>compute results</li><li>collect information</li><li>create reports</li><li>…</li></ul></td>
    <td><ul><li>test server status</li><li>initialize server</li><li>prepare user data</li><li>compute results</li><li>collect information</li><li>create reports</li><li>…</li></ul></td>
    <td><ul><li>test server status</li><li>initialize server</li><li>prepare user data</li><li>compute results</li><li>collect information</li><li>create reports</li><li>…</li></ul></td>
</tr>
<tr>
    <th>requests fired in parallel<br/>(thanks to Alan for this proposal):</th>
    <td><ul><li>test server status</li><li>initialize server</li><li>prepare user data</li><li>compute results</li><li>collect information</li><li>create reports</li><li>…</li></ul></td>
    <td><ul><li>test server status</li><li>initialize server</li><li>prepare user data</li><li>compute results</li><li>collect information</li><li>create reports</li><li>…</li></ul></td>
    <td><ul><li>test server status</li><li>initialize server</li><li>prepare user data</li><li>compute results</li><li>collect information</li><li>create reports</li><li>…</li></ul></td>
</tr>
</table>

CSS

body {
   font-size: 12px;
}
h1 {
    font-size: 20px;
    font-weight: bold;
}
td, th {
   padding: 5px;
    border: 1px solid #ccc;
}
th {
    font-weight: bold;
}

li {
    color: #888;
}
li.running {
    padding-left:15px;
    background: url('http://creativecouple.github.com/jquery-timing/tests/run.png') no-repeat left center;
    font-weight:bold;
    color: black;
        deferreds = ;
}
li.ready {
    padding-left:15px;
    background: url('http://creativecouple.github.com/jquery-timing/tests/ok.png') no-repeat left center;
    color: black;
}
li.ready:last-child {
    font-weight:bold;
}

JavaScript

// initialize dummy request information object
var requests = [];
for (var i = 0; i < 6; i++) {
    requests.push({
        url:'/echo/json/',
        data:{json:'{foo:"bar"}', delay: Math.random()/2}
    });
}

// start all methods on button click
$('#go').on('click').attr('disabled',true)
    .$('li').removeClass('running ready').end()
    .wait(startOneByOne_with_callbacks)
    .wait(startOneByOne_with_repeatLoop)
    .wait(startOneByOne_with_eachLoop)
    .wait(startParallel_with_callbacks)
    .wait(startParallel_with_repeatLoop)
    .wait(startParallel_with_eachLoop)
    .attr('disabled',false);


///// now define the different ways to work with requests

function startOneByOne_with_callbacks() {
    var $list = $('ul').eq(0),
        start = (new Date()).getTime(),
        result = $.Deferred();

    function requestNext(i) {
        if (requests[i]) {
            $('li', $list).eq(i).addClass('running');
            $.post(requests[i].url, requests[i].data, function() {
                $('li', $list).eq(i).toggleClass('running ready');
                requestNext(i + 1);
            });
        } else {
            $('li', $list).eq(i).addClass('ready').text('Done in ' + ((new Date()).getTime() - start) / 1000 + 's');
            result.resolve();
        }
    }
    requestNext(0);
    return result;
}

////

function startOneByOne_with_repeatLoop() {
    var start = (new Date()).getTime();

    return $('ul:eq(1) li:first').repeat().addClass('running')
        .wait(function(i) { return $.post(requests[i].url, requests[i].data) })
        .toggleClass('running ready').next()
      .until(requests.length, true).then(function() {
          this.addClass('ready').text('Done in ' + ((new Date()).getTime() - start) / 1000 + 's');
      });
}

////

function startOneByOne_with_eachLoop() {
    var start = (new Date()).getTime();

    return $('ul:eq(2) li').not(':last').each($).addClass('running')
        .wait(function(i) { return $.post(requests[i].url,...