Question

I have a function calling another function to get data. That data might be locally cached, or I may have to go get it. Locally cached is easy. But if I go get it, via $.getJSON, without locking the browser by turning async off, is there some way to still get that data back to the original function?

Ie, in the following code:

1) Since bar() no longer exists when parseData() returns, where is dataX going?

2) Without having yet another callback layer that both bar() and parseData() would call, and without locking the browser while the request is going on, how can I get dataX back from parseData() to foo()?

var foo = function () {

    $('body').text(bar());

};

var bar = function () {

    var parseData = function (dataX) {
        // do something to data
        return dataX;
    };

    if (localStorage.hasOwnProperty('someKey')) {
        return localStorage.getItem('someKey');
    else {
        $.getJSON('http://somewhere.api.com?fubar=good', parseData);
    }

};

Answer 1

You cannot return when making asynchronous calls. Instead just call foo as a callback:

var foo = function (text) {

    $('body').text(text);

};

var bar = function () {

    var parseData = function (dataX) {
        // do something to data
        foo(dataX.someText);
    };

    if (localStorage.hasOwnProperty('someKey')) {
        foo(localStorage.getItem('someKey'));
    else {
        $.getJSON('http://somewhere.api.com?fubar=good', parseData);
    }

};