When I enter the for loop, an ajax call is made. However, the for loop does not wait for the ajax call to receive a response before incrementing the value, causing the response to update to the wrong div element.
For example: Let's say we have 'N' number of divs with ids divid0, divid1, divid2, divid3, divid4........ dividn.
In the loop (for(var i=0; i < n; i++)), when 'i' is initially zero, I intend to update my first ajax response to the div with id "divid0". But because 'i' increments to one before the ajax response is received, the data meant for "divid0" ends up in "divid1" instead.
I initially tried solving this issue using synchronous ajax calls. However, this caused another problem where users were unable to scroll down the page until the entire content was loaded. With around 10 sliders on the page, it took over a minute to fully load and become visible to the user. As a result, I want users to be able to scroll down the page even while it is loading (after at least one slider is loaded).
Thank you in advance. Below is the code snippet:
for(var sliderId=0; sliderId < 6; sliderId++){
$.get('api url', {}, function(response){
if(!response){
$("#slider"+sliderId).html('Currently there are no items in this category');
} else{
if((response.results) && (response.results.length > 0)){
getInfo(response, sliderId);
}
}
});
}