My issue: AJAX requests are interfering with each other, even though I am not using global variables, variables like folderlist seem to contain items that they should not contain. If I set async to false, the issue goes away, however this is bad as it makes the end user think the page is locked up.
Items that belong in the folderList in one iteration show up in a different iteration, and shouldn't be there.
for (var g = 0; g < args['url'].length; g++) {
var folderList = [];
var url = args['url'][g];
var serverUrl = args['url'][g];
$.getJSON(url + "?f=pjson", function (json) {
for (var key in json.folders) {
folderList[key] = url + "/" + json.folders[key];
}
}).done(function () {
for (var i = 0; i < folderList.length; i++) {
secondAjaxCall(folderList[i], serverUrl);
}
})
}
function secondAjaxCall() {
$.getJSON(url + "?f=pjson", function (json) {
}).done(function (json) {
for (var i = 0; i < json.whatever.length; i++) {
thirdAjaxCall();
}
I've looked into the jquery when and deferred, however none of these will stop the next iteration from starting until it's done all the requests it needs to do.
What I need is a way for the next iteration to wait until the first iteration is done.