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?

Answer 1

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)
}