title: Is there a better way to serially submit multiple AJAX requests?
body: <p>I have a page with multiple forms that I submit via Ajax POSTs serially. At first, I tried using synchronous XHR requests, but this causes the browser to lock up for the duration of the request, and breaks my DOM-manipulation effects, which is unacceptable. So the pattern I ended up using is basically this:</p>
  
  <pre><code>var fcount = 0;    // incremented for each form to be submitted
  function submit_form( num ) { 
      var fdata = { ... }; // data from form # num
      $.ajax( { async:    true,
                url:      '/index.cgi',
                data:     fdata,
                type:     'POST',
                success:  function() { 
                    if ( num &lt; fcount ) { 
                        submit_form( ++num );
                    }
                }
             } );
  }
  
  $( '#submit_form_btn' ).click( function() { submit_form( 1 ) } );
  </code></pre>
  
  <p>The recursion strikes me as a bit of an ugly solution to what is essentially an iterative problem. Is there a cleaner or more elegant way that this could be handled?</p>