jQuery callback function only firing on the last loop

Question

I am aware there are other questions addressing the same issue, but I cannot find an answer I understand properly.

I am attempting to read an array of pages by looping through an array of page names, then using jQuery's $.get function to get the contents of the page. I believe it is due to loop closure that only the last callback of the loop fires. However, I do not understand a way around this or how to fix it, could someone please explain?

Here is the code:

function checkall2()
{
    i = 0;
    for(i in $servers) {
        $.get("servers/" + $servers[i], function(result) {
            alert(result + $servers[i]);
        });
    }
}

No, it is a globally declared javascript variable, it is just a simple string array containing different words for server names like test1, test2, test3 — ρσݥzση
– ρσݥzση, Commented Aug 5, 2012 at 13:49
I just do that for most of my javascript variables, as a habit I guess. — ρσݥzση
– ρσݥzση, Commented Aug 5, 2012 at 13:50
callback would only be triggered if request is successful, are you sure that's the case? — anazimok
– anazimok, Commented Aug 5, 2012 at 13:50
Not related to you question: Try to avoid using global variables if possible, wrapping them in a closure — Ortiga
– Ortiga, Commented Aug 5, 2012 at 13:54

ubik · Accepted Answer · 2013-09-24 06:27:46Z

4

It's a scope issue - i is getting "overwritten", and when finally the callbacks are triggered its value will be the same for all of them.

Since you are using jQuery, you can use an iterator instead:

$.each($servers, function(i, server) {
  $.get("servers/" + server, function(result) {
    alert(result + server);
  });
});

IMHO, that looks much clearer.

edited Sep 24, 2013 at 6:27

answered Aug 5, 2012 at 13:58

ubik

4,5802 gold badges25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ρσݥzση Over a year ago

Thanks, I understandy why it is going wrong now, it is because i is the same for all of the callbacks by the time they fire, but your solution does not seem to work, for some reason the alert is never being called.

ubik Over a year ago

I replaced the $.get call with a setTimeout and it seems to work OK. There is no reason it'd fail in your case. Any errors?

ρσݥzση Over a year ago

No, no errors, just never gets to the alert, if I set a breakpoint in the debugger on the alert, it never reaches it

Chris Moutray Over a year ago

@PedroFerreira this wont work because server will contain the index of the array, you need a second param for the item -> $.each works different to $(selector).each api.jquery.com/jQuery.each

Chris Moutray · Accepted Answer · 2012-08-05 14:19:05Z

3

I think this is a scope problem - try and assign to a local within the loop, like this:

function checkall2()
{
    i = 0;
    for(i in $servers) {
        var server = $servers[i];
        $.get("servers/" + server, function(result) {
            alert(result + server);
        });
    }
}

edited to show working $.each -> http://api.jquery.com/jQuery.each/

function checkall2()
{
    $.each($servers, function(index, server) {
        $.get("servers/" + server, function(result) {
            alert(result + server);
        });
    });
}

edited Aug 5, 2012 at 14:19

answered Aug 5, 2012 at 13:52

Chris Moutray

18.4k7 gold badges49 silver badges66 bronze badges

Comments

Tomer · Accepted Answer · 2012-08-05 13:54:41Z

0

You can't call async method in a loop, instead do this:

function checkall2(i)
{
    if(i< $servers.length) {
        $.get("servers/" + $servers[i], function(result) {
            alert(result + $servers[i]);
           checkall2(++i);
        });
    }
}

answered Aug 5, 2012 at 13:54

Tomer

17.9k17 gold badges82 silver badges139 bronze badges

1 Comment

Ohgodwhy Over a year ago

$.ajaxSetup({ async: false });

Niborb · Accepted Answer · 2012-08-05 13:55:12Z

0

var $servers = [1,2,3];
function checkall2()
{
    i = 0;
    for(i in $servers) {
       $.get("servers/" + $servers[i], function(result) {
         alert(result + $servers[i]);
      });
    }
 }
 checkall2();

This works OK, on my machine. You sure your global variable is OK?

answered Aug 5, 2012 at 13:55

Niborb

7845 silver badges15 bronze badges

Comments

ρσݥzση · Accepted Answer · 2012-08-05 14:18:24Z

0

Ok I figured out why it was not working. Thank you Pedro for explaining the problem to me. So the variable result was different each time, there was no problem with that, it was just because the contents of all three files where identical, so once I changed them, I realised the result was different.

The reason why $servers[i] was the returning the same each time, was because once the loop had finished the callbacks where then called, and by that time i was at the end of the loop so it just returned $servers[2] three times (because 2 was the end of the loop).

answered Aug 5, 2012 at 14:18

ρσݥzση

2174 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery callback function only firing on the last loop

5 Answers 5

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related