Make AJAX "get" function synchronous / how to get the result?

Question

I'm experiencing a problem of $.get function. The url contains JSON

my code:

 xyz = null

    $.get('http://www.someurl.com/123=json', function(data) {
       var xyz = data.positions[0].latitude;
    });

alert(xyz);
//some more code using xyz variable

I know that xyz will alert a null result because the $.get is asynchronous.

So is there any way I can use the xyz outside this get function?

Solution 1

The real answer is NO, but you can use this:

function useXYZ(){
    alert(xyz);
}

xyz = null        

$.get('http://www.someurl.com/123=json', function(data) {
   xyz = data.positions[0].latitude;
   useXYZ();
});

Solution 2

get is a shortcut. You can do the same, but synchronous, using:

var xyz = null


$.ajax({ url: 'http://www.someurl.com/123=json', 
         async: false,
         dataType: 'json',
         success: function(data) {
              xyz = data.positions[0].latitude;
            }
        });


alert(xyz);

You'll have to declare the xyz variable before the ajax call, though.

Solution 3

This is a common issue with Javascript. Javascript code must be written in continuation passing style. Its annoying but its something you can convert without thinking too much.

Basicaly, whenever we would have something like

var x = someSyncFunction(a, b, c);
//do something with x
console.log(x);

We can convert it into async code by making all the code after the function returns into a continuation function and turning x from a variable into a parameter of the continuation callback.

someAsyncFunction(a, b, c, function(x){
    //do something with x;
    console.log(x);
});

You have to watch out that its very easy to write confusing code. A good trick to keep in mind is taht you can make your own functions also receive callbacks. This allows them to be used by different function (just like normal sync helper functions that return a value can be used by different functions)

var getXyz = function(onResult){ //async functions that return do so via callbacks
                                 //you can also another callback for errors (kind of analogous to throw)
    $.get('http://www.someurl.com/123=json', function(data) {
       var xyz = data.positions[0].latitude;
        onResult(xyz); //instead of writing "return xyz", we pass x to the callback explicitely.
    });
};

getXyz(function(xyz){ //this would look like "var xyz = getXyz();" if it were sync code instead.
    console.log('got xyz');
});

The trick here is to change all return statements from the function into calls to the callback function. Think as if async function never returned and the only way to give a value back to someone is to pass that value to a callback.

---

You might ask why there isnt an easier way to do all of this. Well, there is not, unless you use another language instead of Javascript (or at least something that lets you write async code in synchronous style but automatically compiles down to regular Javascript)

Comments

[Admin]

Why waste time and mental confusion on a global property? (Or closured variable). It is often better written as function useXYZ(xyz) {..}... and then pass through the data from the callback.

[gdoron is supporting Monica]

@pst. I thought to do so, but I wanted to show him how he can use the outer variable. (BTW, it doesn't have to be a global variable). You can edit as you wish sir!

[moribvndvs]

Well, in all honesty my initial answer was poor. I should really stop trying to answer questions from my phone.

[Diolor]

In Chrome and firefox i'm still getting a null. In safari works well

[moribvndvs]

Hmm. I've tested with Safari, Chrome, and Firefox (on OSX). Here's a pure example jsfiddle.net/HackedByChinese/F2Ey5/1

[Diolor]

Thanks! Thought it work well with alert I'm still having trouble with the rest of the script. And actually when I have to put a lot of stuff inside the function useXYZ(){ ... }

[Diolor]

OSX here as well. In concept it seems correct (with async: false ) but I don't know... Maybe there's smthng with json. I'm not much of an expert. Thanks though!

[Diolor]

Thanks! What if I had to grab two vars from the JSON like "xyz" for the latitude and "abc" for the longtitude? How would the onResult be and function(xyz). Could I nest them both inside it or should I create a second function(abc) ?

[Rohan Desai]

You could package both values inside a single object and pass the object to the callback onResult({lat:xyz, long:abc});, similarly to how you would return multiple values from a synchronous function) or you could have the callback function receive two parameters instead of one onResult(xyz, abc);. Having more then one callback is usualy for different and mutually exclusive computation paths. A common example is having one success (or "return") callback and one error (or "throw") callback.