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);

        }
    });

}