Can I declare a non-global variable to store asynchronous values?

Question

I have multiple JavaScript files. I have a JS function that runs upon load that contains multiple AJAX calls. Each AJAX call performs a callback (as well as increments a synchronous counter):: myArray.push('somevalue');

so that I can verify when all AJAX calls (for this JS file) have finished.

Is there a way that I can get away with not declaring myArray as a global variable, while allowing asynchronous callbacks to push into this array?

Answer 1

If you want to execute some code after a set number of AJAX requests have completed, use $.when .

If you are using myArray solely to know when the requests are finished, you can remove it. If you are using it to store the result of each request, you can keep it in the same scope as the requests and then access it in the done handler. Try this:

var myArray = [];

var ajax1 = $.ajax({
    url: '/foo/',
    success: function(data) {
        myArray.push(data);
    });
});

var ajax2 = $.ajax({
    url: '/bar/',
    success: function(data) {
        myArray.push(data);
    });
});

$.when(ajax1, ajax2).done(function() {
    // both requests complete
    // myArray will contain the data of both requests at this point...
    for (var i = 0; i < myArray.length; i++) {
        console.log(myArray[i]);
    }
});

Answer 2

Declare a variable that is only accessible within the scope you want it (eg, inside the function).

Something like:

var ajaxCalls = function() {
    var myArray = [];

    var ajax1 = $.ajax({
        url: 'foo.com',
        success: function(data) {
            myArray.push(data);
        });
    });

    // do more AJAX stuff

    $.when(ajax1, ..., ).done(function() {
        // make sure all requests are complete
        // do stuff with the completed array
    });
};

Since JavaScript has functional scoping, your myArray variable won't be global, but it will be accessible within the ajax callbacks. Hope that helps!