jQuery promises - serialized

by Jorge Bustos Pereda

HTML

<h1>Both done executed when both promises resolved</h1>
<div id="results">
</div>

CSS

h1 {
    font-family: verdana;
    font-size: 14pt;
}

JavaScript

var deferred1 = $.Deferred();
var deferred2 = $.Deferred();

var addLine = function(text) {
    $('#results').append($('<p>' + text + '</p>'));
};

$.when(deferred1, deferred2)
.then(function() {
    deferred1.done(function() {
        addLine('1: begin');
        addLine('1: end');
    }).then(function() {
        deferred2.done(function() {
            addLine('2 begin');
            addLine('2 end');
        });
    });
});

// Resolve deferred2, and 1.5s later deferred1
deferred2.resolve();
setTimeout(function() {
    deferred1.resolve();
}, 1500);