Ordered Asynchronous AJAX Calls
<p>I'm creating a script that performs several functions and I want to update the user as the functions are completed.  I have nested <code>$.ajax()</code> calls with each subsequent call in the previous call's <code>success</code> block.</p>

<p>There are a total of 4 calls made for each loop.  Let's call them <code>scan_1</code> through <code>scan_4</code>.  The <code>success</code> block of <code>scan_1</code> calls <code>scan_2</code> and so on down the chain.</p>

<p>For example, let's say I'm looping over 3 objects.  I want the process to go like this:</p>

<p>Loop 1</p>

<ul>
<li>scan_1</li>
<li>scan_2</li>
<li>scan_3</li>
<li>scan_4</li>
</ul>

<p>Loop 2</p>

<ul>
<li>scan_1</li>
<li>scan_2</li>
<li>scan_3</li>
<li>scan_4</li>
</ul>

<p>Loop 3</p>

<ul>
<li>scan_1</li>
<li>scan_2</li>
<li>scan_3</li>
<li>scan_4</li>
</ul>

<p>The problem is that it's running through all the <code>scan_1</code> calls first.  I must be missing something, but I can't seem to figure it out.  Any advice would be much appreciated.</p>

<p>For reference, here is a snippet of <code>scan_1</code> (irrelevant stuff snipped):</p>

<pre><code>for(var i = 1; i &lt;= 3; i++)
{
    $.ajax({
        type:       'GET',
        url:        url,
        data:       'do=scan&amp;step=1&amp;' + string,
        dataType:   'json',
        success:    function (result)
        {
            if(result.proceed == 'true')
            {
                $('#scan_progress').append(result.message);
                scan_2();
            }
            else
            {
                $('#scan_progress').append(result.message);
            }
        }
    });
}
</code></pre>

<p>Thoughts?</p>

<p>Thanks in advance.</p>
