Jquery - Looping A .load() Inside A 'for' Statement

I'm not sure if this will actually be possible, since load() is an asynchronous method, but I need some way to basically Load several little bits of pages, one at a time, get some

Solution 1:

You probably want a recursive function, that waits for one iteration, before going to the next iteration etc.

(functionrecursive(i) {
    var digiList = $('.2u');
    var link = digiList.eq(i).find('map').children().attr('href') + ' div.row:nth-child(2)';
    $.ajax({
        url: 'grabber.php',
        data: {
            url: link
        }
    }).done(function(data) {

        // do stuff with "data"

        $.ajax({
            url: 'insertDigi.php',
            type: 'POST',
            data: {
                digimon: digimon
            },
            dataType: 'json'
        }).done(function(msg) {
            console.log(msg);
            if (i < digiList.length) {
                recursive(++i); // do the next one ... when this is one is done
            }
        });
    });
})(0);

Solution 2:

Just in case you want them to run together you can use closure to preserve each number in the loop

for (var i = 0; i < digiList.length; i++) {
    (function(num) { < // num here as the argument is actually i
        var link = "http://www.digimon-heroes.com" + $(digiList).eq(num).find('map').children().attr('href');
        var contentURI= link + ' div.row:nth-child(2)';   
        $('#single').load('grabber.php?url=' + contentURI, function() {
            ///////////// And I do a bunch of JQuery stuff here, and save stuff into an object 
            ///////////// Aaaand then I call up an ajax request.
            $.ajax({
                url: 'insertDigi.php',
                type: 'POST',
                data: {
                    digimon: JSON.stringify(digimon)
                },
                dataType: 'json',
                success: function(msg) {
                        console.log(msg);
                    }
                    ////////This calls up a script that handles everything and makes an insert into my database.
            }); //END ajax
        }); //END load callback Function
    })(i);// <-- pass in the number from the loop
}

Solution 3:

You can always use synchronous ajax, but there's no good reason for it.

If you know the number of documents you need to download (you can count them or just hardcode if it's constant), you could run some callback function on success and if everything is done, then proceed with logic that need all documents.

To make it even better you could just trigger an event (on document or any other object) when everything is downloaded (e.x. "downloads_done") and listen on this even to make what you need to make.

But all above is for case you need to do something when all is done. However I'm not sure if I understood your question correctly (just read this again).

If you want to download something -> do something with data -> download another thing -> do something again...

Then you can also use javascript waterfall (library or build your own) to make it simple and easy to use. On waterfall you define what should happen when async function is done, one by one.