Why is my callback in JavaScript not working for asynchronous results?

Question

I have been trying to set up callbacks to get the results from an asynchronous operation, but I have been unsuccessful so far. Have a look at the structure of the code below.

 var markers = []; //global array

 //The callback parameter is a reference to the function which is passed as an argument from the doAsyncOperation call
 function doAsyncOperation(callback) {
        var xmlArray = []; //the array that will hold the data that I'm trying to access later in the code
        downloadUrl("theXmlFile.xml", function (data) { //this is the async code that stores the results in an array called xmlArray    
            var xmlItems = data.documentElement.getElementsByTagName("row");
            xmlArray.push(theData); //this array is populated with data within this async code block

            //the logic works here; this part is not the issue
        });
        setTimeout(function () {
            callback(xmlArray); //passing xmlArray as the result 
        }, Math.random() * 2000);
    }
 //the code below is the function call that should be getting the results from the doAsyncOperation function
 doAsyncOperation(function (xmlData) {
     alert(xmlData); //I am not able to see the data in xmlArray here
 });


 //the function below is called on Window.onload
 function initialize() {
     //In this function, I need to use the results in the xmlArray above.
     //I have tried saving the results into a global array, but it doesn't work because this function is called 
     //before the async operation completes.
 }

To sum it up, I am having trouble accessing the results of an asynchronous operation. As you can see, I have tried to set up callbacks to access the data, but I have to be doing something wrong. I have looked at similar questions here, but none of them seem to address the issue I'm having specifically. Any help is appreciated.

Answer 1

You have two variables called xmlArray .

One is in the scope of doAsyncOperation.

The other is in the scope of the anonymous function you pass as an argument to downloadUrl .

Both of them start out by having empty arrays assigned to them.

The second one has some items pushed into it.

The first one is the one you pass to callback

Remove the line

var xmlArray = []; //this array is populated with data within this async code block

If you want the code in the anonymous function to modify the first array instead.

---

NB: Since you try to deal with the data Math.random() * 2000 after sending the request, it is possible that you will not have received a response (triggering the anonymous function) before you try to pass it to callback .

Answer 2

Shouldn't this be like shown below - the callback is invoked after downloadUrl finishes

function doAsyncOperation(callback) {
    var xmlArray = []; 
    downloadUrl("theXmlFile.xml", function (data) { 
        var xmlItems = data.documentElement.getElementsByTagName("row");
        xmlArray.push(theData);
        callback(xmlArray); 
    });
 }
 doAsyncOperation(function (xmlData) {
     alert(xmlData); 
 });