jQuery Promises

An experiment with jQuery deferrals and promises using when

by klenwell

HTML

<ul id="log">
    <li>init</li>
</ul>

JavaScript

function a1() {
    log('calling a1');
    var jqxhr = $.ajax({
        url: "/echo/json/",
        data: {
            foo: 'bar'
        }
    }).done(function (data) {
        log("a1 success", data);
    }).fail(function () {
        log("a1 error");
    }).always(function () {
        log("a1 complete");
    });
    
    return jqxhr;
}

function a2() {
    log('calling a2');
    var jqxhr;
    setTimeout(function () {
        jqxhr = $.ajax("/echo/json/")
            .done(function () {
            log("a2 success");
        });
    }, 1000);
    return jqxhr;
}

function a3() {
    log('calling a3');
    var jqxhr = $.ajax("/echo/json/")
        .done(function () {
            setTimeout(function() {
               log("a3 success");
            }, 2000);
    });
    return jqxhr;
}

function log(msg) {
    console.log(msg);
    var entry = $('<li />').text(msg);
    $('#log').append(entry);
}


$.when(a1(), a2(), a3()).done(
function (r1, r2, r3) {
    log(r1);
    log(r2);
    log(r3);
    log('a1-3 done');
});