Have jquery ajax (php) scripts run one after another instead of at the same time

Question

Here's the code - this runs as soon as the document is loaded (inside $(document).ready(function(){ ) Is there a way to code this so that the next ajax query will run after the current one is finished? I want to create more ajax calls on the page, but they will not execute until all the queued calls are completed. If each call would run after the other is executed, this will give new ajax calls a chance to get to the front of the next script insead of at the end of all 30. Any advice would be appreciated.

for (var x=0;x<=30;x++)
{
emailnumber = '<?php echo $storage->countMessages(); ?>'-x;
dataString='emailnumber='+emailnumber+'&url=<?php echo $url; ?>&email=<?php echo $email_address; ?>';

    $.ajax({

       type: "POST",

    url: "phpdocument.php",

    data: dataString,

    success: function(msg){

            $('#results').append(msg);

        }

    });


}

Edit: Should I be using the setTimeout function somewhere?

Answer 1

Set async to false in the options for your ajax() call. But, know this: synchronous Ajax requests may lock the browser. This is because the Ajax request will halt further execution until complete. In other words, you won't get out of the for loop until all the Ajax requests have completed.

for (var x = 0; x <= 30; x++) {
    emailnumber = '<?php echo $storage->countMessages(); ?>' - x;
    dataString = 'emailnumber=' + emailnumber + '&url=<?php echo $url; ?>&email=<?php echo $email_address; ?>';

    $.ajax({

        type: "POST",
        async: false,
        url: "phpdocument.php",

        data: dataString,

        success: function(msg) {

            $('#results').append(msg);

        }
    });

}

Answer 2

FindEmail('<?php echo $storage->countMessages(); ?>');


    $(".unsubscribe_button").live("click", function(event){

        var thetd = $(this).parents(".unsubscribe_td");

        thetd.empty().append('"loading image url here" alt="" />');
        var senderemail = thetd.prev().html();
        var emailid = $(this).attr('id');
        var dataString='email=<?php echo $_SESSION[email_address]; ?>&emailid='+emailid;
        $.ajax({

            type: "POST",

            url: "php script location",

            data: dataString,       

            success: function(msg){

                thetd.empty();
                thetd.append('success image url here');

        }

        });
        return false;

    });

Here's what I'm using that fulfilled my needs. Anyone see any flaws with this?