Return AJAX data before iterating parent loop

Question

Sorry guys and gals, can't seem to wrap my head around this one, despite the various scenarios I've read online. So here is the situation:

I've got an array of strings called recipientsList

For each string in that array, I want to make an AJAX call that passes the string in as a parameter, then returns the data from the AJAX to my callback function.

My code is below. What is happening is that if I have three strings in the recipientsList array, then my expandDistributionList function gets called 3 times, but the code never hits the success portion of the AJAX call until after my .each finishes iterating. Thoughts?

function expandDistributionList(emailAddress, cb) {
    $.ajax({
        url: "/expandDistributionList",
        type: 'get',
        dataType: 'json',
        context: this,
        data: {
            distListName: emailAddress,
        },          
        success: function(data) {
            cb(data);
        },
        error: function() {                
            ace.search.mainframeErrorSignal = $.signal({
                'message': 'Unable to expand distribution list.',
                'addClass': 'error',
                'sticky': true
            });
        }
   });
}

recipientsList.each(function(item) {
    expandDistributionList(item, function(data){
        if(data...) {
             //do some code here
        }
        else {
             //do something else
        }
    });
});

score 0 · Answer 1 · answered Apr 28 '14 at 20:42

Hmm, I am not sure, but this worked with my code

    function sendAsJSON(url, data, async, successCallback, errorCallback) {
        $.ajax({
            url: url,
            data: data,
            type: "POST",
            async: true,
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                if (successCallback != null) {
                    successCallback(data.d);
                }
            },
            error: function (errorData) {
                if (errorCallback != null) {
                    errorCallback();
                }
            }
        });
    }

would you mind changing "GET" to "POST" and add contenttype.

hmm, not sure how your code above will fix the issue of the ajax calls completing after the .each finishes. Can you explain? — Leann, Apr 28 '14 at 20:51
Hmm, I am not sure, I tried looking putting some of my code in a loop which worked fine. would you mind giving this one a try? http://stackoverflow.com/a/7330771/1955342 — sylar, Apr 28 '14 at 22:01

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

This is standard behaviour of JavaScript event model, your callbacks where queued in event queue and will be executed after the main code finished work;

And because my English is poor, I get some description from book Async JavaScript for this

The ease of event scheduling in JavaScript is one of the language’s most powerful features. Async functions like setTimeout make delayed execution simple, without spawning threads. JavaScript code can never be interrupted, report erratum because events can be queued only while code is running; they can’t fire until it’s done.

You can chain Your async requests using promise, here is great example

edited May 23 '17 at 10:26

Community

1
1

answered Apr 28 '14 at 21:03

Łukasz Szewczak

1,851
1
13
14

This makes sense, but it doesn't really shed light on how to code around the problem. Could you post a code solution that I could follow? – Leann Apr 28 '14 at 21:11
@Leann Why this behaviour is the problem for You? You can not stop you loop and wait for request to success unless You make your request synchronous – Łukasz Szewczak Apr 28 '14 at 21:23
I thought that setting async: false was trouble because it could seriously freeze up the browser, thus I was looking for an alternative solution. – Leann Apr 28 '14 at 21:35
Yes this could seriously freeze up the browser, and this is really bad. So am I correct that You want to execute your async requests one after another? – Łukasz Szewczak Apr 28 '14 at 21:40

Return AJAX data before iterating parent loop

2 Answers2