JavaScript: asynchronous case

Question

I have the following code:

var IPMapper = {
    markerArray = [];
    addIPArray: function(ipArray) {
        .....
        for (var i = 0; i < ipArray.length; i++) {
            IPMapper.addIPMarker(ipArray[i], i, ipArray.length, IPMapper.f_callback);
        }
        return IPMapper.markerArray;
    },
    addIPMarker: function(ip, i, ip_array_length) {
        var url = encodeURI(IPMapper.baseUrl + ip + "?callback=?");
        $.getJSON(url, function(data) {
            var latitude = data.latitude;
            var longitude = data.longitude;
            var latlng = new google.maps.LatLng(latitude, longitude);
            var marker = new google.maps.Marker({
                draggable: false,
                position: latlng
            });
            IPMapper.markerArray.push(marker);
        }
    }
}

I have tried:

IPMapper.addIPArray(array_with_ips);

But I get an empty array. How I can return a filled array? I need return results from call IPMapper.addIPArray. I try make callback for IPMapper.addIPMarker, but that's not what I need(I need only call one function and got result(some case for next caching in RoR)). Please any comments about it.

See http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call and http://stackoverflow.com/q/8726046/218196 — Felix Kling, Mar 28 '14 at 21:26

Faust · Accepted Answer · 2014-03-28T22:01:33.820

One (bad) option is to use $.ajax instead of $.getJSON, where you could set async=false, but async=false is deprecated and therefore strongly discouraged.

A better option is to assign the values in a callback function using .done(). Then, instead of returning IPMapper.markerArray from addIPArray, you can expose it as a property of your IPMapper object, and grab it later. Then consider raising an event signalling it's ready when the ajax call is completed, and in a handler for that event, access IPMapper.markerArray to do what you need to do.

score 1 · Answer 2 · answered Mar 28 '14 at 21:35

But I get an empty array. How I can return a filled array? I need return results from call IPMapper.addIPArray. I try make callback for IPMapper.addIPMarker, but that's not what I need(I need only call one function and got result(some case for next caching in RoR)). Please any comments about it.

the only thing you can return from IPMapper.addIPArray is a promise.You cant return anything else from an async operation since it is async,javascript cant know when the result will be available.so

addIPMarker: function(ip, i, ip_array_length) {
        var url = encodeURI(IPMapper.baseUrl + ip + "?callback=?");
        return $.getJSON(url, function(data) {
        var latitude = data.latitude;
        var longitude = data.longitude;
        var latlng = new google.maps.LatLng(latitude, longitude);
        var marker = new google.maps.Marker({
            draggable: false,
            position: latlng
        });
        IPMapper.markerArray.push(marker);
    }

then

IPMapper.addIPArray(/*..arguments..*/).done( function(result) {
                //continue the code here
            });

http://api.jquery.com/category/deferred-object/

An async operation is like when you click on something and you want your code to execute something on click event. You cant know when the click will happen,all you can do is write a click event handler.

JavaScript: asynchronous case

2 Answers2