Callback to prevent looping before completion of ajax

Question

I have read countless examples of similar posts calling for help and also explanations of the theory behind callbacks, but I just can't grasp it. I have gotten to the stage where I'd rather find a solution for my particular scenario and move on even if I don't really understand 'why/how' it works. I have an ajax call that needs to loop through and need to find a way to prevent the next call before the previous has completed. Could you suggest how I might use a callback or other method to make this happen.

Here's the code (which works, but doesn't run the ajax calls 1-by-1 so I'm getting memory errors and page crashes). The function that runs is quite intensive and can take up to 20 seconds (but as little as 1 second)

function returnAjax(startLoc,startRow)
{
        var url='index.php?option=com_productfinderrtw&format=raw&task=goThroughProcess';
        var data = 'startloc='+startLoc+'&starttour='+startRow;
                            var request = new Request({
                            url: url,
                            method:'get',
                            data: data,
                            onSuccess: function(responseText){
    document.getElementById('fields-container').innerHTML= responseText;  
//I realise this is where on-success code cneeds to go- is this where the callback belongs? 
                            }
                            }).send();

}

function iterator (startLoc,startRow) {
    if (startRow <20)
        {
        startRow++;
        }
        else
        {
        startRow = 1;
        startLoc++;
        }
    return [startLoc, startRow];
}


function runRAA() {
    var startLoc = 0;
    var startRow = 1;

    while (startLoc < 47)
    {
    returnAjax(startLoc,startRow);
    $counter = iterator(startLoc,startRow);
        var newLoc = $counter[0];
        var newRow = $counter[1];

        startLoc = newLoc;
        startRow = newRow;
    }
}

runRAA() is the main function that runs on a button press. How can I rearrange this to make sure that returnAjax doesn't run until the previous time is completed?

Thanks in advance for this. I KNOW that similar questions have been asked, so I beg that you don't direct me to other explanations- chances are I've read them but just don't grasp the concept.

Cheers!

PS. I understand that the iterator() function needs to run only when the returnAjax() is complete also, as iterator() sets the new parameter values for each instance of the returnAjax() function

where is the new Request class defined ? – Parthik Gosar Apr 20 '13 at 19:02 — Parthik Gosar, Apr 20 '13 at 19:02

score 0 · Answer 1 · answered Apr 20 '13 at 19:15

Allow to pass a callback parameter that will be called when the ajax call is completed.

function returnAjax(startLoc, startRow, callback) {
    //...
    onSuccess: function(responseText) {
        document.getElementById('fields-container').innerHTML= responseText;
        if (callback) {
            callback.apply(this, arguments); //call the callback
        }
    }
    //...
}

Then you can do something like this:

 function runRAA(startLoc, startRow) {
        startLoc =  startLoc || 0;
        startRow = startRow || 1;

        if (startLoc < 47) {
            returnAjax(startLoc, startRow, function (responseText) {
                var counter = iterator(startLoc, startRow);

                //do something with the response

                //perform the next ajax request
                runRAA(counter[0], counter[1]);

            }));
        }
    }

    runRAA(); //start the process

Callback to prevent looping before completion of ajax

1 Answers1