title: Why does jQuery.then() behave differently when using $.deferred and $.ajax
body: <p>I've been trying to get my head around the jQuery Deferred object. My intention is to inspect each ajax response (success/fail). I want to do this without interfering with other code that declares a typical $.ajax().done().fail() request.</p>
  
  <p>I've user the $.ajaxPrefilter() to get each ajax request before it is executed. Using the .then() method on the jqXHR object, I've managed to add a function that will be called before the .done() method placed on the original $.ajax() call</p>
  
  <p>The code below will print out the following:</p>
  
  <blockquote>
    <p>def done<br>
    def then<br>
    2nd ajax prefilter then<br>
    2nd ajax done<br>
    2nd ajax then<br>
    ajax done<br>
    ajax then<br></p>
  </blockquote>
  
  <p>What I don't understand is why the prefilter step executes first. I would have expected it to have been executed last, or not at all.</p>
  
  <p>The behaviour is what I want, but I don't understand why.</p>
  
  <pre><code>// this is a typical usage of deferred with two done functions added, the second via .then()
  var def = $.Deferred();
  def.done(function(){
      document.write("def done&lt;br&gt;");
  });
  def.then(function(){
      document.write("def then&lt;br&gt;");
  });
  def.resolve();
  
  // this is a typical ajax request with a done function added, followed by another using .then()
  $.ajax("/echo/json/").done(function(){
      document.write("ajax done&lt;br&gt;");
  }).then(function(){
      document.write("ajax then&lt;br&gt;");
  });
  
  // for the third request i intercept and call the .then() method 
  $.ajaxPrefilter( 
      function( options, originalOptions, jqXHR ) {
                  jqXHR.then(function(data, textStatus, jqXHR){
                       document.write("2nd ajax prefilter then&lt;br&gt;");
                      });
              });
  
  // create a typical ajax request. these will be executed after the prefilter .then()
  $.ajax("/echo/json/").done(function(){
      document.write("2nd ajax done&lt;br&gt;");
  }).then(function(){
      document.write("2nd ajax then&lt;br&gt;");
  });
  </code></pre>
  
  <p>Thanks in advance for any help</p>
  
  <p>UPDATE: ------------</p>
  
  <p>From @Bergi response, the code below demonstrates how the $.ajaxPrefilter() is called before the done().</p>
  
  <pre><code>$.ajaxPrefilter( 
      function( options, originalOptions, jqXHR ) {
              document.write("prefilter function within $.ajax call&lt;br&gt;");
                  jqXHR.then(function(data, textStatus, jqXHR){
                       document.write("2nd ajax prefilter then&lt;br&gt;");
                      });
              });
  
  var functionToRunWhenDoneIsCalled = function() {
      document.write("done is called function&lt;br&gt;");
      return function(){
         document.write("2nd ajax done&lt;br&gt;");
      }
  }
  
  $.ajax("/echo/json/").done(
      (functionToRunWhenDoneIsCalled)()
  ).then(function(){
      document.write("2nd ajax then&lt;br&gt;");
  });
  </code></pre>
  
  <p>This outputs:</p>
  
  <blockquote>
    <p>prefilter function within $.ajax call<br>
    done is called function<br>
    2nd ajax prefilter then<br>
    2nd ajax done<br>
    2nd ajax then<br></p>
  </blockquote>
  
  <p>Which answers my question about how the .then() method is attached to the deferred jqXHR object before the .done() method.</p>