javascript callback function result

Question

for (var i=0; i<10; i++) {
    var box = $('div.container');

    (function(x) {
        request(box[i], function(n) {    
            //question about function(n) here
        }
    })(i)
}

function request(boxContainer, callback) {
    $.getJSON(url, function(data) {
        //dataArray is created here
    }

    boxContainer.innerHTML = '';

    $.each(dataArray, function(idx, v){
        boxContainer.innerHTML += '<div class="output"><h4>..</h4><p>..</p></div>';
    }

    callback(data);
}

The request() function should produce an output div container for each one of the 10 products in the for loop.

My question is:

After the calling request() function has completed, when it is time for the callback function to be executed, is it that all 10 div containers have been created or is it only the one for box[i] is created at that point?

Your code won't work as written currently. All the code in "request" after the `$.getJSON()` call should be **inside** the `$.getJSON()` callback. — Pointy, Feb 06 '13 at 16:25
`$.getJSON` is asynchronous, you can't use `dataArray` outside of the callback. — jbabey, Feb 06 '13 at 16:26
Anyone know of a really good thorough response that explains AJAX and the meaning of asynchronous? Questions like this come up so often it'd be nice to have a good (possibly community wiki) response to point them all to. — James Montagne, Feb 06 '13 at 16:27
@JamesMontagne i've been using [this question](http://stackoverflow.com/questions/7779697/javascript-asynchronous-return-value-assignment-with-jquery) as the duplicate for closing. — jbabey, Feb 06 '13 at 16:34
@James: I wrote [this question/answer](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call-from-a-function) for that purpose, but it's more targeting at the "how to return value from ajax call" questions. — Felix Kling, Feb 06 '13 at 16:59
@Pointy, you are correct, the closing } for getJSON should be after callback(data), it was typo. Thanks for pointing out. — user1824996, Feb 06 '13 at 17:20
@FelixKling Thanks, that's what I was looking for. I had been considering making something similar for a while now and wasn't sure if that was the way to go about it. Also, I have been reading your name as "King" for nearly 2 years and just now noticed that it's "Kling"... — James Montagne, Feb 06 '13 at 17:44
@James: If it helps, you are not the only one who makes that mistake ;) Feel free to add to the answer! It was set up as community wiki, but CasperOne reverted it. That should not hold you back to improve the answer though :) — Felix Kling, Feb 06 '13 at 17:49

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

Your attempt to use a closure in the loop was correct, yet you have used the wrong variable name - it should be x not i:

for (var i=0; i<10; i++) {
    var box = $('div.container');

    (function(x) {
        request(box[x], function(n) {    
            //question about function(n) here
        }
    })(i)
}

Btw, your selection for box should have been moved outside the loop.

edited May 23 '17 at 12:04

Community

1
1

answered Feb 06 '13 at 16:38

Bergi

630,263
148
957
1,375

All kinds of typo I did today. sorry about that. – user1824996 Feb 06 '13 at 17:21

score 0 · Accepted Answer · answered Feb 06 '13 at 16:29

I think that it is only the one for box[i] is created at that point. For a callback after all have been created, you can either use jQuery's promise and deffered system see here (multiple). Or you can maintain a counter in your code so that you execute some code only after your target of 10 is reached.

Maybe like this var target = counter = 10, data={}; for (var i=0; i

    (function(x) {
        request(box[x], function(n) {
            data[x] = n;
            if(--counter == 0) {
                //all are done
            }
        }
    })(i)
}

javascript callback function result

2 Answers2