Question

I use callbacks all the time when using 3rd part libraries such as jquery, however I’ve run into an issue where I need to set up my own call back. Take for instance my current code:

// Get All Rates
function getAllRates() {
    $('#shiplist tr.mainRow').each(function() {

        var curid = $(this).attr("id");
        var cursplit = curid.split("_");
        var shipid = cursplit[1];

        getRate(shipid);

    });

}

This iterates through all the table rows that have class “mainRow”, and each main row has the id of “shipment_#####” so for each row it splits by the _ to get the actual ship id, which it then uses to calla “getRate” function which sends an ajax call to the server using UPS or USPS api’s to get the rate for the given shipment.

This works fine for UPS all rows start loading at once and return their rates independently. The problem is now with Stamps.com, they use an authenticated soap conversation so an authenticator string needs to be received from the first call and used in the next call and so on.

So basically I need to modify the above function to execute the “getRate()” function and wait for it to complete before executing the next iteration.

Anyone know how I can do this with out a lot of fuss?

EDIT – Clearification on the question being asked:

I want to take the following function:

getRate(shipid);

and access it like so:

getRate(shipid, function(shipList) { _Function_data_here_ });

When I define the getRate function, how do I define it so that it has that callback ability? how does that work?

Answer 1

I would suggest you extract all the IDs at once and pass them to your function. That way, you can easily process the first on individually and the rest afterwards. With deferred objects, this is really easy.

For example:

function extractAllIds(callback) {

    var ids = $('#shiplist tr.mainRow').map(function() {
        return this.id.split('_')[1];
    }).get();

    callback(ids);
}

function getRates(ids) {
    var first = ids.shift();

    $.ajax({data: first, ...}).done(function(response) {
        // extract the authenticator string
        for(var i = ids.length; i--; ) {
            $.ajax({data: ids[i], ...});
        }
    });
}

extractAllIds(getRates);

In any way, you cannot make $.each wait for response of Ajax calls.