For loop is not waiting untill the ajax response come.

Question

Inside the for loop am making the ajax call. For loop is not waiting until ajxa call got response, it incrementing the value to plus one so response is not updating to it's respective div.

Example: I have 'N' no of divs with id divid0, divid1, divid2, divid3, divid4........ dividn.
In the loop(for(var i=0; i < n; i++)) first 'i' value is zero, I need to update my first ajax response to div which has id "divid0", but untill I got the ajax response in the loop 'i' is incremented to one so my first ajax response is updating to div which has id "divid1" instead of "divid0".

I overcome this problem using ajax synchronous call but the problem is I am unable to drag the page to bottom untill page is completely loaded. My web page contain around 10 slider so it is taking more than a min to load completely then only user can view the page. so I want user to drag to bottom of the page even while page loading(After minimum one slider is loaded).

Thanks in advance, Here is my code

for(var sliderId=0; sliderId < 6; sliderId++){ 
    $.get('api url', {}, function(response){
        if(!response){ 
            $("#slider"+sliderId).html('Currently there is no items in this category');
        } else{
            if((response.results) && (response.results.length > 0)){
                getInfo(response, sliderId);
            }        
        }                
    });     
}

You should make it a synchronous call, then. Or, use the `.done()` method with it. — ndugger, May 22 '14 at 12:34
Forget the `for` loop. You can also start the next AJAX call from the success callback of the previous one. — kapa, May 22 '14 at 12:36
this is very common problem, please see for more detail http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Girish, May 22 '14 at 12:37
attach the next `get` request inside a `callback` of the previous get, dont run it in a loop. — Jo E., May 22 '14 at 12:37
Also related: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example (I think this is more relevant in your case - the most important part here is not AJAX) — kapa, May 22 '14 at 12:39

score 0 · Answer 1 · answered May 22 '14 at 12:38

you can achive result using this recursive method also

 var sliderId = 0;
function recursive1(sliderId)
{
  $.get('api url', {}, function(response){
    if(!response){ 
        $("#slider"+sliderId).html('Currently there is no items in this category');
    } else{
        if((response.results) && (response.results.length > 0)){
            getInfo(response, sliderId);

        }        
    }  
    if(sliderId < 6)
               recursive(sliderId++)              
});     
}
recursive1(0)

I think it would be best that you indicate why his code did not work. you know teach a man to fish thing. . — Jo E., May 22 '14 at 12:39

score 0 · Answer 2 · answered May 22 '14 at 12:49

The problem is, that the 'sliderId' in all responses refers to the same variable. As the callback is not called before the for-loop has finished, 'sliderId' will have value '6' for all response calls. You can tackle this by introducing a new scope for each ajax call (like MMK sggested).

E.g. by:

for(var sliderId=0; sliderId < 6; sliderId++) {
 updateDiv(sliderId);
}

function updateDiv(sid) {
  $.get('api url', {}, function(response){
    if(!response){ 
        $("#slider"+sid).html('Currently there is no items in this category');
    } else{
        if((response.results) && (response.results.length > 0)){
            getInfo(response, sid);
        }        
    }                
  }); 
}

For loop is not waiting untill the ajax response come.

2 Answers2