var log = function(content){
$('<p/>').html(content).appendTo('#log');
}
function doTask(i){
// Create a new process.
var defer = $.Deferred();
// Start main task in the process.
setTimeout(function(){
log("Step " + (i+1) + " finished.");
// End the process after successful finish.
defer.resolve(i);
// Abort the process if failed.
// defer.reject(hereIsWhy);
}, Math.random()*1000);
// Report progress if the main task is lengthy.
// defer.notify(progress);
// Return read-only version of the process.
return defer.promise();
}
$(function(){
// Start step #1 in a process.
var currentStep = doTask(0);
// Chain step #2 .. #5 one-by-one.
for(var i = 1; i < 5; i++){
currentStep = currentStep.then(function(j){
return doTask(j+1);
});
}
// Report after step #5.
currentStep.done(function(){
log("All steps done.");
});
});
<div id="log"></id>