Question

function updateServerList() {
    var i;

    for (i=0; i < servers.length; i++) {
     var server = servers[i];
     var ip = server['serverIp']


     var html = constructServer(i);
     var divId = '#server' + ip.replace(new RegExp("\\.", "mg"), "-");
     var visible = $(divId).find(".server_body").is(":visible");
     var div = $(divId);
     div.html(html);

     // Set div class.
     var prevState = div.attr('class').substring(7)
     if (prevState != server['state']) {

         if (server['state'] == 'ok') {
         console.debug(server);
         div.slideUp('fast', function(server) {
             $(this).removeClass();
             $(this).addClass('server_ok');
             var id = ipToId[server['serverIp']];
             console.debug(id);
             if (id == 0) {
             adjacentIp = servers[1]['serverIp'];
             adjacentDivId = '#server' + adjacentIp.replace(new RegExp('\\.', 'g'), '-');
             $(adjacentDivId).before(this);
             }
        }).delay(1000);
        div.slideDown();
        }
    }
}

console.debug shows server as being defined, but inside the anonymous function, server is not defined. What am I going wrong?

Answer 1

because server is an argument to the function, its masking the value of the server at the higher level. You need to either pass server to the function, or remove the function argument. I would do the latter, as slideUp doesn’t give you a way to pass arguments. You could do it but its needlessly complicated; it would look something like the following

div.slideUp('fast', (function(server) { 
   return function(){ 
      // your stuff here, server is now 'closed in', i.e. in a closure
   }
})(server)); // <-- this server is the current value in the loop

what you are doing here is invoking a new function right away, passing in the argument server, and returning a new function that receives that value.