Asynchronous Loop of jQuery Deferreds (promises)

Question

I am trying to create what I think is referred to as a "Waterfall". I want to sequentially process an array of async functions (jQuery promises).

Here's a contrived example:

function doTask(taskNum){     var dfd = $.Deferred(),          time = Math.floor(Math.random()*3000);      setTimeout(function(){         console.log(taskNum);         dfd.resolve();     },time)      return dfd.promise(); }  var tasks = [1,2,3];  for (var i = 0; i < tasks.length; i++){     doTask(tasks[i]); }  console.log("all done"); 

I would like it to complete the task in the order they are executed (present in the array). So, in this example I want it to do task 1 and wait for it to resolve then do task 2 wait for it to resolve, do task 3 etc and the log "all done".

Maybe this is really obvious but I've been trying to figure this out all afternoon.

Answer 1

I'd try using $().queue instead of $.Deferred here. Add the functions to a queue, and only call the next one when ready.

function doTask(taskNum, next){     var time = Math.floor(Math.random()*3000);      setTimeout(function(){         console.log(taskNum);         next();     },time) }  function createTask(taskNum){     return function(next){         doTask(taskNum, next);     } }  var tasks = [1,2,3];  for (var i = 0; i < tasks.length; i++){     $(document).queue('tasks', createTask(tasks[i])); }  $(document).queue('tasks', function(){     console.log("all done"); });  $(document).dequeue('tasks');