If I want to have synchronous and asynchronous functions execute in a particular order I could use jQuery promise but it doesn't seem to work the way I'd expect it to work.

Functions a,b and c should execute in that order when in a the deferred.resolve() is called I'd expect function b to be executed but all functions are executed immediately no matter if the resolve is called.

Here is the code:

function a(){

  var deferred = $.Deferred();

  setTimeout(function(){

    console.log(status in a:,deferred.state());

    //this should trigger calling a or not?

    deferred.resolve(from a);

  },200);

  console.log(a);

  return deferred.promise();

};

function b(){

  var deferred = $.Deferred();

  setTimeout(function(){

    console.log(status in b:,deferred.state());

    deferred.resolve(from b);

  },200);

  console.log(b);

  return deferred.promise();

}

//synchronous function

function c(){

  var deferred = $.Deferred();

  console.log(c);

  console.log(status in c:,deferred.state());

  deferred.resolve(from c);

  return deferred.promise();

}

function test(){

  fn=[a,b,c],i=-1,

  len = fn.length,d,

  d = jQuery.Deferred(),

  p=d.promise();

  while(++i<len){

    p=p.then(fn[i]);

  }

  p.then(function(){

    console.log(done);

  },

  function(){

    console.log(Failed);

  });

  d.resolve();

  //instead of the loop doing the following has the same output

  //p.then(a).then(b).then(c);

  //d.resolve();

}

test();

Output is:

a

b

status in c: pending

c

done

status in a: pending

status in b: pending

Expected output:

a

status in a: pending

b

status in b: pending

c

status in c: pending

done

Tried a some combinations of the following modifications:

  d = jQuery.Deferred();

  setTimeout(function(){d.resolve();},100);

  var p=d.promise();

  while(++i<len){

    p.then(fn[i]);

  }

But all with same unexpected results, b gets called before deferred of a is resolved, c is called before deferred of b is resolved.