jQuery AJAX Asynchronous Callback Functions Not Working

Question

I know there's a bunch of questions on here with similar issues to mine, but after trying several suggestions from all of them, I'm still running into issues that I believe are being caused by the asynchronous behavior of my AJAX calls.

The basic flow is this:

Click button -> getInfo(makeList)
                AJAX call... success: makeList();
                    -> makeList()
                       var friendArray = getFriends(createArray);
                    -> getFriends(createArray)
                       AJAX call... success: return createArray(data);
                           -> createArray(data)
                              var friends = new Array();
                              var friendID = data.id;
                              var friendName = getName(friendID);
                              friends.push(friendName + ":" + friendID);
                              return friends;
                                  -> getName(id)
                                     AJAX call... success: return data.name;

Here's the gist of the code:

$("#submit").click(getInfo(makeList));

function getInfo(callback) {
    $.ajax({
        ...
        success: function(data) {
            ...
            callback();
        }
    });
}

function makeList() {
    var friendArray = getFriends(createArray);
    for (var n in friendArray) {
        $("#friends").append("<option value=\""
            + friendArray[n].split(":")[1] + "\">"
            + friendArray[n].split(":")[0] + "</option>");
        }
}

function getFriends(callback) {
    $.ajax({
        ...
        success: function(data) {
            ...
            return callback(data);
        }
    });
}

function createArray(data) {
    var friends = new Array();
    for (var i in data) {
        var id = data[i].id;
        var friendName = getName(id);
        friends.push(friendName + ":" + id);
    }
    return friends;
}

function getName(id) {
    $.ajax({
        ...
        success: function(data) {
            ...
            return data.name;
        }
    });
}

I have a console.log(friendArray) call at the beginning of makeList() , immediately following the call to var friendArray = getFriends(createArray) and it prints out friendArray = undefined so what I assume is happening is that the function is just continuing without waiting for the getFriends(createArray) function to complete.

It also seems as though the createArray(data) function is not waiting for the getName(data.id) function to complete, and so all the names are coming back as undefined.

As you can see, I've tried passing in the various functions as callback functions, but it didn't do me any good. Any pointers to what I'm doing wrong or what I should change to get the desired behavior would be greatly appreciated!

Answer 1

Change your makeList function:

function makeList() {
  getFriends(function(data){
    var friendArray = createArray(data);
    for (var n in friendArray) {
        $("#friends").append("<option value=\""
            + friendArray[n].split(":")[1] + "\">"
            + friendArray[n].split(":")[0] + "</option>");
        }
  });
}

Calling getFriends(createArray) will return undefined as the ajax call inside the function is asynchronous. Once the ajax call to be initiated is called. The function returns to its caller and ajax continues independently. Since you need to make sure you have the loop over friendArray executes only after the ajax returns, that should be executed on callback too.