jQuery Forum

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. };
11. 
    
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. };
22. 
    
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. };
33. 
    
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.