Question

I’m a little puzzled on how to solve this.
I have a function updateDate( id ) that updates a specific row in the database with the ID passed along. This function makes an AJAX-call to a PHP-script and it takes a bit of time to run.

I then have this other function called updateDates() which makes an AJAX-call to another PHP-script to get all ID’s that needs updating, then loops through these and calls updateDate( id ) with the current ID in the loop.

The problem is that the loop doesn’t seem to wait for a response from updateDate( id ) before continuing the loop so it creates like 2398572375 AJAX-calls at the same time and it bugs out.

How can I make the loop wait for a response from updateDate( id ) before continuing?

updateDate( id ) returns true when readyState of the AJAX-call is 4(meaning when the response is done) and I tried in the loop to do:

if( updateDate( id ) ) { Do something. }

Didn’t help.
Any ideas about this?

EDIT: Here’s some of the code as requested.

updateDates():

                function updateDates()
                {

                    ids = new XMLHttpRequest();

                    ids.open( "GET", "<?php echo anchor("index.php/main/ajax/getIdsToUpdate"); ?>", true );
                    ids.onreadystatechange = function() {

                        if( ids.readyState == 4 )
                        {

                            var response = $.evalJSON( ids.responseText );
                            if( response.type == 1 )
                            {

                                $.each( response.message, function( index, value ) {

                                    if( value != '' )
                                    {

                                        if( updateDate( value ) )
                                            alert('Checked: ' + value);

                                    }

                                });

                            }

                        }

                    }

                    ids.send(null);

                }

updateDate( id ):

                function updateDate( id )
                {

                    req = new XMLHttpRequest();
                    req.open("GET", "<?php echo anchor("index.php/main/ajax/updateDate/"); ?>" + id, true);

                    req.onreadystatechange = function() {

                        if( req.readyState == 4 ) 
                        {

                            var value = $.evalJSON( req.responseText );

                            // Updating a DIV on the site..

                            return true;

                        }

                    }
                    req.send(null);

                }

Answer 1

There are 2 good ways to do this without compromising with a synchronous (and locked) UI.

A. Create a batch update PHP script

This one’s easy enough. Extend your PHP script so that it can take a list of IDs and dates instead of just one at a time. This is the most performant and best solution.

B. Convert to a queue

You should convert updateDates() into a dequeuing function. Here’s what that means:

Every time updateDates() is called, it pops the first element off the array of IDs you need to update, calls the ajax function, and then sets updateDates as the callback from the Ajax call.

Pseudocode/rough sketch:

function updateDates() {
    if(allDates.length == 0) return;

    var data = allDates.unshift();
    $.post('/save.php', { 'id': data.id, 'date': data.date }, updateDates);
}