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>