I am encountering an issue with an asynchronous JavaScript function. I currently have a function that is inserting elements one by one, which is functioning correctly. However, my goal is to proceed only after all the .load() functions have completed.
The way I have tried to implement the Deferred() part seems to be incorrect, and I am at a loss on how to accomplish this.
Important Note: The code has been simplified for better clarity.
var d = new jQuery.Deferred();
var i = index;
function loadView() {
if(i > -1 && i < array.length) {
if(!jQuery.contains(document.documentElement, $(selector)[0])) {
/* do something here */
panel.load(myPHPfile, function() {
$dom.append($(selector));
i++;
if(i < array.length) {
loadView();
d.resolve();
}
});
}
}
}
loadView();
jQuery.when(d).then(function() {
/* execute some action once all elements are inserted */
});
Your assistance in resolving this matter would be greatly appreciated!