title: Chained jQuery deferred, all progress callbacks are called even after a then statement
body: <p>I'm trying to chain some calls based on jquery deferred object. To make it simple, I want to :</p>
  
  <ol>
  <li>Call an asynchronous method returning a deferred object</li>
  <li>Observe its progress</li>
  <li>When done, call another method</li>
  <li>Observe its progress</li>
  </ol>
  
  <p>At first, I wrote something like that :</p>
  
  <pre><code>myFirstFunction()
    .progress(myFirstProgressCallback)
    .done(myFirstDoneCallback)
    .then(mySecondFunction)
    .progress(mySecondProgressCallback)
    .done(mySecondDoneCallback);
  </code></pre>
  
  <p>But I observed something I did not expected (after reading the docs, it seems to be the way it works) :</p>
  
  <ol>
  <li>myFirstDoneCallback is called only once myFirstFunction resolves its deferred object</li>
  <li>mySecondDoneCallback is also called only once</li>
  <li>but mySecondProgressCallback is called when myFirstFunction AND mySecondFunction calls notify on their own deferred object.</li>
  </ol>
  
  <p>Example <a href="http://jsbin.com/boxuxaho/1/" rel="nofollow">you can run it in this jsbin</a>:</p>
  
  <pre><code>function async(number){
    var def = new $.Deferred();
  
    setTimeout(function(){
      def.notify("Hello from " + number);
    }, 300);
  
    setTimeout(function(){
      def.resolve("I'm done " +number);
    }, 600);
  
    return def.promise();
  }
  
  async(1)
    .progress(function(msg){
      console.log("First progress: " + msg);
    })
    .done(function(msg){
      console.log("First done: " +msg);
    })
    .then(function(){
      return async(2);
    })
    .progress(function(msg){
      console.log("Second progress: " + msg);
    })
    .done(function(msg){
      console.log("Second done: " +msg);
    });
  </code></pre>
  
  <p>Result in the console:</p>
  
  <pre><code>"First progress: Hello from 1"
  "Second progress: Hello from 1"
  "First done: I'm done 1"
  "Second progress: Hello from 2"
  "Second done: I'm done 2"
  </code></pre>
  
  <p>First reaction : "Why the hell ??????"</p>
  
  <p>Second : "How can I do what I want ?"</p>
  
  <p>I replaced my code by this one, which works great (<a href="http://jsbin.com/pizabama/1/" rel="nofollow">jsbin</a>):</p>
  
  <pre><code>function async(number){
    var def = new $.Deferred();
  
    setTimeout(function(){
      def.notify("Hello from " + number);
    }, 300);
  
    setTimeout(function(){
      def.resolve("I'm done " +number);
    }, 600);
  
    return def.promise();
  }
  
  async(1)
    .progress(function(msg){
      console.log("First progress: " + msg);
    })
    .done(function(msg){
    console.log("First done: " +msg);
  })
  .then(function(){
    return async(2)
      .progress(function(msg){
        console.log("Second progress: " + msg);
      })
      .done(function(msg){
        console.log("Second done: " +msg);
      });
    });
  </code></pre>
  
  <p>Output:</p>
  
  <pre><code>"First progress: Hello from 1"
  "First done: I'm done 1"
  "Second progress: Hello from 2"
  "Second done: I'm done 2"
  </code></pre>
  
  <p>How to avoid registering the progress callback inside the function inside the "then" statement?</p>