Question

I have a array.each function that calls a JSONP request for each item and injects code into the page from the JSONP feed.

However the items are being injected in the wrong order, aka different to the sequential order in the feed. I’m assuming this happens because the next item it run through the .each function before the first once finishes retrieving its feed and injects.

How can I force each “next” item to wait untill the previous one has finished?

var list = new Array("1","2","3","4","5");

Array.each(list, function(item)
{
    new request.JSONP..

    onComplete: function()
    {
        //inject code
    }
});

if the inject code output the numbers in the array it would be random every time:

2,4,5,1,3

I want it to be in order:

1,2,3,4,5

Hope that made sense, Thanks.

Using Mootools 1.3

Answer 1

Welcome to event-driven programming.

You need to fire each one off from the ‘onComplete’ of the one before, not try to fire them all off from the same piece of code. You could do that by making each one wait until a flag gets set by your onComplete, but it is much better to structure your code according to the events.