How to access callbak function variable globally in jquery

Question

In this code:

$(document).ready(function() {
        var lat = 0;
        var lng = 0;
        function getLatLng(address) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    lat = results[0].geometry.location.lat(); //how do I access lat 
                    lng = results[0].geometry.location.lng() //and lng outside function ormake it global
                }
            });
            alert(lat); // does not display only show's the 0
        }
        getLatLng();
    });

I want the alert(lat) to show the lat not zero.

how can I access this?

thanks in advance!

The alert is not inside the callback function, so it's actually running that *before* the geocode call is complete. Move it up 1 line. — Reinstate Monica Cellio, Jan 27 '14 at 09:56
You are already accessing `lat` just fine. The problem is that the `geocode` call runs asynchronously and has not yet completed when the `alert` is executed. You cannot work around that with brute force: it's impossible to print a result before you have received it. — Jon, Jan 27 '14 at 09:57
geocoder.geocode() is an asynch process so you need to alert in callback function. — Sohil Desai, Jan 27 '14 at 09:58
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Salman A, Jan 27 '14 at 09:59

score 4 · Accepted Answer · answered Jan 27 '14 at 09:59

Consider using callback function when you work with asynchronous operations:

function getLatLng(address, callback) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            lat = results[0].geometry.location.lat(); //how do I access lat 
            lng = results[0].geometry.location.lng() //and lng outside function ormake it global
            callback(lat, lng);
        }
    });
}

getLatLng(function(lat, lng) {
    alert([lat, lng]);
});

score 1 · Answer 2 · answered Jan 27 '14 at 09:58

Your alert prints 0 because it is run before geocoder finishes its job. You can use callback to be notified when geocoder finishes:

$(document).ready(function() {
    var lat = 0;
    var lng = 0;
    var geocoderFinished = function(){
        alert(lat);
    };
    function getLatLng(address) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                lat = results[0].geometry.location.lat(); //how do I access lat 
                lng = results[0].geometry.location.lng() //and lng outside function ormake it global
                geocoderFinished();
            }
        });
    }
    getLatLng();
});

score 0 · Answer 3 · answered Jan 27 '14 at 09:57

0

It is because alert(lat); is getting executed before the success function. You should be alerting it either inside callback function or use setTimeout and give the alert.

it is bad practise to use setTimeout as we never know how long it will take to execute server side call. So its better practise to call the code in callback function to ensure the changes

answered Jan 27 '14 at 09:57

Milind Anantwar

81,290
25
94
125

+1 for the brief explanation of the nature of asynchronous calls, but -1 for even contemplating using `setTimeout`. How long does the call take? – Reinstate Monica Cellio Jan 27 '14 at 09:58
`setTimeout` is a bad pattern for this kind of operations. – hsz Jan 27 '14 at 09:59

How to access callbak function variable globally in jquery

3 Answers3