title: Using jQuery when to defer ajax processing
body: <p>I have a list of 15+ ajax requests that need to be called in a specific order.  I need each ajax call to wait until the previous function finishes before making the next call.  This issue arises because my ajax call, has a direct callback that is also an ajax call.</p>
  
  <pre><code>createCheckIn() {
      this.selectedList = [...] // long list of objects
      count = 0
  
      for ( i=0; i &lt; this.selectedList.length; i++ ) {
          $.ajax({
              method: "POST",
              url: url,
              data: {
                  check_in: {
                      client_id: this.selectClient.id,
                      program_id: this.program_id
                  }
              },
              success: function(res) {
                  that.createWeighIn(count, res.id)
                  count = count + 1
              },
              error: function(err) {
                  console.log(err)
              }
          })
      }
  },
  createWeighIn(index, check_in_id) {
      let data = {}
      let that = this
      data.weigh_in = this.selectedList[index]
  
      $.ajax({
          method: "POST",
          url: url,
          data: data,
          success: function(res) {
              console.log(res)
          },
          error: function(err) {
              console.log(err)
          }
      })
  }
  </code></pre>
  
  <p>the correct data is generated but I believe the ordering is off because eventually there is a call to <code>createCheckIn()</code> that begins before the previous entry has completed.</p>
  
  <p><strong>Is there a way to chain these functions such that <code>createCheckIn()</code> and <code>createWeighIn()</code> are called (and complete) before <code>selectedList</code> iterates.</strong> </p>