jQuery “.then()” is not sequent, and not working as expected

jQuery “.then()” is not sequent, and not working as expected

I need to call three functions one by one. For this purpose i am using jquery deferred "then" to chain the calls.

Here is the code:

  1. function fillQuality(x){
  2.     console.log('Q');
  3.     var deferred = jQuery.Deferred();
  4.     var intervalId = setInterval(function(){
  5.         clearInterval(intervalId);
  6.         console.log("Quality: ", x);   
  7.         deferred.resolve();
  8.     }, 2000);
  9.     return deferred.promise();
  10. };

  12. function fillPrize(x){
  13.     console.log('P');
  14.     var deferred = jQuery.Deferred();
  15.     var intervalId = setInterval(function(){
  16.         clearInterval(intervalId);
  17.         console.log("Prize: ", x);   
  18.         deferred.resolve();
  19.     }, 2000);
  20.     return deferred.promise();
  21. };

  23. function fillSection(x){
  24.     console.log('S');
  25.     var deferred = jQuery.Deferred();
  26.     var intervalId = setInterval(function(){
  27.         clearInterval(intervalId);
  28.         console.log("Section: ", x);   
  29.         deferred.resolve();
  30.     }, 2000);
  31.     return deferred.promise();
  32. };

  34. var promise = jQuery.when().promise();
  35. promise = promise.then(fillQuality).then(fillPrize).then(fillSection);
  36. promise.done(function(){
  37.     console.log('done');
  38. });
In this case i supposed to have following output:


Q
Quality: undefined
P
Prize: undefined
S
Section: undefined
done







But in fact I have received:


Q
P
S
done
Quality: undefined
Prize: undefined
Section: undefined









As I see jQuery calls all three functions and ignore promise resolving.
What I am doing wrong?
Or what I don't know about jquery promises?

Thanks.