title: jquery - usage of .done(), .then() and .when() for making ajax requests in a given order
body: <p>I've been doing a lot of reading about Promises in jquery and avoiding "callback hell" when making multiple ajax requests.</p>
  
  <p>I feel though even after reading all this, there's no simple answer being given to what to use - in terms of <code>.done()</code>, <code>.then()</code> and <code>.when()</code> - in terms of chaining the requests.</p>
  
  <p>I've tried to construct the most basic example to illustrate my point. The code below works exactly as I want it to, but the only thing this relies on is <code>.done()</code> and I can't see where other methods (such as <code>.then()</code> or <code>.when()</code>) fit into this.</p>
  
  <p>So I have created 3 PHP scripts and used PHP's <a href="http://php.net/manual/en/function.sleep.php" rel="noreferrer">sleep</a> method to artificially delay how long these scripts take to complete. The delays are set as follows:</p>
  
  <ul>
  <li><code>r1.php</code> - 5 seconds</li>
  <li><code>r2.php</code> - 1 second</li>
  <li><code>r3.php</code> - 3 seconds</li>
  </ul>
  
  <p>The script itself is as simple as this:</p>
  
  <pre><code>&lt;?php
      // r1.php
      echo "starting r1.php \n";
      sleep(5); // Delay execution. Varies as described above for each script
      echo "ending r1.php \n";
  ?&gt;
  </code></pre>
  
  <p>So if these were run in parallel, the order they'd complete in would be <code>r2.php</code>, <code>r3.php</code>, then <code>r1.php</code>. </p>
  
  <p>But what if we wanted to run them in order (<code>r1</code>.php, <code>r2.php</code>, <code>r3.php</code>) and have jquery wait until each ajax request was made before going on to the next? For example if something in <code>r2.php</code> depends on the result of <code>r1.php</code> etc.</p>
  
  <p>I've written the following - which does exactly that:</p>
  
  <pre><code>$(document).ready(function() {
     $.ajax({
          url: 'ajax/r1.php',
          method: 'get'
     }).done(function(response1) {
         console.log('After r1.php\n');
         console.log(response1);
  
         $.ajax({
              url: 'ajax/r2.php',
              method: 'get'
         }).done(function(response2) {
             console.log('After r2.php\n');
             console.log('response1:' + response1);
             console.log(response2);
  
             $.ajax({
                  url: 'ajax/r3.php',
                  method: 'get'
             }).done(function(response3) {
                 console.log('After r3.php\n');
                 console.log('response1:' + response1);
                 console.log('response2:' + response2);
                 console.log(response3);
             });
  
         });
     });
  </code></pre>
  
  <p>});</p>
  
  <p>As you can see, the requests are completing in order, and taking the time specified in each PHP script:</p>
  
  <p><a href="https://i.stack.imgur.com/HRXFw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HRXFw.png" alt="enter image description here"></a></p>
  
  <p>Furthermore, due to the scope in which the callbacks are running I can access, for example, <code>response1</code> (the output of <code>r1.php</code>) in the callback that handles <code>r3.php</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/kPQqk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kPQqk.png" alt="enter image description here"></a></p>
  
  <p><strong>My question is:</strong> Under what circumstances are any functions other than <code>.done()</code> (such as <code>.then()</code> or <code>.when()</code> - which are mentioned in countless resources) actually needed to do this type of thing? When would you even need <code>.then()</code> or <code>.when()</code> for this type of scenario?</p>
  
  <p>As far as I understand, <code>.done()</code> is Promise-compatible. I've even replaced <code>.done()</code> with <code>.then()</code> in the code above and the results are exactly the same.</p>
  
  <p>I have read all of the following but I feel like all of these are complicating the issue, of how to run ajax requests in order with jquery:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done">jQuery deferreds and promises - .then() vs .done()</a></li>
  <li><a href="https://stackoverflow.com/questions/16026942/how-do-i-chain-three-asynchronous-calls-using-jquery-promises">How do I chain three asynchronous calls using jQuery promises?</a> </li>
  <li><a href="https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f" rel="noreferrer">https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f</a> </li>
  </ul>
  
  <p>Please can someone explain this in a way beginners can understand? I am using <strong>jquery 3.2.1</strong> so would like a response that's specific to jquery, not vanilla JavaScript.</p>
  
  <p><em>I originally asked <a href="https://stackoverflow.com/questions/51929634/jquery-using-done-successively-is-giving-the-same-results-as-then-don">this question</a> but I feel it was badly worded and didn't include enough code. So I've mocked up the code given here to illustrate the exact problem.</em></p>