Promises and Callbacks - Then example Simplified

by Rui Figueiredo

HTML

<div id="panel"></div>

<button id="btUseThen">Use .then on Promise</button>
<button id="btUseDone">Use .done on Promise</button>

JavaScript

var asyncOperation = function (action, delay) {
    var deferred = $.Deferred();

    setTimeout(function () {
        action();
        deferred.resolve();
    }, delay);

    return deferred;
};

var writeStar = function (color) {
    var dot = $('<span>*</span>');    
    dot.css("color", color);
    $('#panel').append(dot);
};

var writeRedStar = function(){writeStar("red")};
var writeBlueStar = function(){writeStar("blue")};

var writeStartsWithThen = function(){
    var promise;
    for (var i = 0; i < 10; i++) {
        if (promise === void 0) {
            promise = asyncOperation(writeRedStar, 500);
        } else {        
            promise = promise.then(function(){return asyncOperation(writeRedStar, 500);});
        }
    }
}

var writeStartsWithDone = function(){
    var promise;
    for (var i = 0; i < 10; i++) {
        if (promise === void 0) {
            promise = asyncOperation(writeBlueStar, 500);
        } else {        
            //the return statement from done is ignored, it's only here to emphasize that difference with .then. done always returns the original promise
            promise = promise.done(function(){return asyncOperation(writeBlueStar, 500);});
        }
    }
}

$('#btUseThen').click(writeStartsWithThen);
$('#btUseDone').click(writeStartsWithDone);