How to access a closure variable from within a callback

Question

I am looping through an array of urls. Each one fetches some jsonp data from a different domain. The success handler needs to be able to access the data in the original loop, however when called from the callback it is always the last value and not the value that was set when the ajax function was called. How do I access or pass this value to the callback?

for(var site in data.sites){
    var domain =  data.sites[site].domain;
    $('#site-logout').append('<div class="processing" id="' + domain.replace(".","-") + '"><strong>' + domain + '</strong> is logging out.');
    $.getJSON(url, function(data){
        if(data.success == true)
            $("#" +  domain.replace(".","-")).removeClass("processing").addClass("processed").html('<strong>' + domain + '</strong> has logged out.');
        else
            $("#" +  site.domain.replace(".","-")).removeClass("processing").addClass("error").text('<strong><a href="http://' + domain + '">' + domain + '</a></strong> has failed to log out. Follow the link to try manually.');
    });
}

Nick Craver · Accepted Answer · 2010-12-05 10:14:48Z

In JavaScript there's no block scope for your for loop, the domain variable is shared for all loops, it's scoped to the parent function, not strictly inside the loop (for example you could access it after the closing } for the for() and it'd be the value it had in the last loop).

To resolve this, you need to create an additional scope with it's own variable; using $.each() is easiest in this case:

$.each(data.sites, function(i, site){
  var domain = site.domain;
  $('#site-logout').append('<div class="processing" id="' + domain.replace(".","-") + '"><strong>' + domain + '</strong> is logging out.');
  $.getJSON(url, function(data){
    if(data.success == true)
        $("#" + domain.replace(".","-")).removeClass("processing").addClass("processed").html('<strong>' + domain + '</strong> has logged out.');
    else
        $("#" + domain.replace(".","-")).removeClass("processing").addClass("error").text('<strong><a href="http://' + domain + '">' + domain + '</a></strong> has failed to log out. Follow the link to try manually.');
  });
});

The for loop way would be like this:

for(var site in data.sites){
  (function(domain) {
    $('#site-logout').append('<div class="processing" id="' + domain.replace(".","-") + '"><strong>' + domain + '</strong> is logging out.');
    $.getJSON(url, function(data){
        if(data.success == true)
            $("#" +  domain.replace(".","-")).removeClass("processing").addClass("processed").html('<strong>' + domain + '</strong> has logged out.');
        else
            $("#" + domain.replace(".","-")).removeClass("processing").addClass("error").text('<strong><a href="http://' + domain + '">' + domain + '</a></strong> has failed to log out. Follow the link to try manually.');
    });
  })(data.sites[site].domain);
}

Collectives™ on Stack Overflow

How to access a closure variable from within a callback

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related