jQuery Deferred and Promise for sequential execution of synchronous and asynchronous functions

Question

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.

Khanh TO · Accepted Answer · 2013-11-21T14:25:04.563

9

For jQuery prior to 1.8, this is a problem, but for new versions of jQuery, this is not a problem anymore:

function test(){
  var d = jQuery.Deferred(), 
  p=d.promise();
  //You can chain jQuery promises using .then
  p.then(a).then(b).then(c);
  d.resolve();
}
test();

DEMO

Below is the demo of jQuery 1.7.2

DEMO

edited Nov 21 '13 at 14:25

answered Nov 21 '13 at 14:12

Khanh TO

46,783
12
97
112

1

As a side note, to get it works in jquery 1.7.2 (using extend jq native code) http://jsfiddle.net/L5nud/2/ – A. Wolff Nov 21 '13 at 14:25
1

jQuery < 1.8 is fine WRT chaining, you just use .pipe instead of .then. 1.8 simply changed .then to be .pipe. – Esailija Nov 21 '13 at 16:49
how to use it, if `a` function return a value that use `b` function and so on. – Cristian Jul 27 '14 at 21:44
@Cristian Chaparro A. The returned value of `a` function is passed as an argument to `b` function. – Khanh TO Aug 02 '14 at 05:35

score 2 · Answer 2 · answered Nov 21 '13 at 16:48

2

jQuery < 1.8 is fine WRT chaining, you just use .pipe instead of .then. 1.8 simply changed .then to be .pipe.

answered Nov 21 '13 at 16:48

Esailija

130,716
22
250
308

score 1 · Answer 3 · answered May 28 '14 at 01:30

1

Sidenote: When you use it without the array, you don't have to start with a promise. $.when({}).then(a).then(b) will do the trick just fine. You only need to make sure you don't put a inside the when.

answered May 28 '14 at 01:30

Bet Lamed

473
2
14

jQuery Deferred and Promise for sequential execution of synchronous and asynchronous functions

3 Answers3

Linked