Running async functions sequentially

http://stackoverflow.com/questions/14412026/jquery-how-to-run-a-function-as-soon-as-another-function-ends

by zarjay

HTML

<div class="one"></div>
<div class="two"></div>

CSS

.one {background:red;width:100px;height:100px;display:none}
.two {background:green;width:100px;height:100px;display:none}

JavaScript

function firstFunction(){
    var deferred = $.Deferred();
    $(".one").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}
function secondFunction(){
    var deferred = $.Deferred();
    $(".two").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}

firstFunction().then(secondFunction);