Chained Promises

Chained promises will return a promise that only resolves after the last promise resolves. *Now with passed arguments!

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div class="state"><span>State: </span>waiting...</div>

JavaScript

transitionTo()
    .then(function () {
        put('Complete');
    }
);

// ------------
// FUNCTIONS 
// ------------

function put(msg) {
    $('.state').text(msg);
}

function transitionTo() {
    return transitionInPrep('1')
        .then(_.partial(transitionIn, '2'))
        .then(_.partial(transitionOutPrep, '3'))
        .then(_.partial(transitionOut, '4'));
}

function transitionInPrep(msg) {
    put('transitionInPrep:' + msg);
    var dfd = $.Deferred();
    setTimeout(function () {
        dfd.resolve();
    }, 3000);

    return dfd.promise();
};

function transitionIn(msg) {
    put('transitionIn:' + msg);

    var dfd = $.Deferred();
    setTimeout(function () {
        dfd.resolve();
    }, 1000);

    return dfd.promise();
}

function transitionOutPrep(msg) {
    put('transitionOutPrep:' + msg);

    var dfd = $.Deferred();
    setTimeout(function () {
        dfd.resolve();
    }, 1000);

    return dfd.promise();
}

function transitionOut(msg) {
    put('transitionOut:' + msg);

    var dfd = $.Deferred();
    setTimeout(function () {
        dfd.resolve();
    }, 1000);

    return dfd.promise();
}