Waiting for AJAX request to finish?

Question

I have a problem that is confusing me at the moment. I am using ajax to get some ID's from a website. Once it's complete I want to store the ID's in a variable for further processing. I have my code laid out like this:

var ids;

function get_ids() { ... Get the ID's from the site and store them in the global variable ids ... }

get_ids();
alert(ids.length);

As you can see ids will always be 0 because the script will continue to run before the ajax request in get_ids has had a chance to respond.

What's the best way to what I'm trying to do? I want to wait until get_ids has finished.

Answer 1

You need to make get_ids take a callback parameter and call it when it receives a response.

For example:

function get_ids(callback) {
    ...
        response: function(data) {
            ...
            callback(data);
        }
    ...
}

get_ids(function(ids) { 
    ...
});

Answer 2

It depends on your AJAX framework, but pretty much any framework will allow you to specify a function to run when the AJAX request is complete. In JQuery:

function get_ids_complete() {
    alert(ids.length);
}

function get_ids() {
    $.get('/ids', function (data) {
        // do something with the data
        get_ids_complete();
    });
}