jQuery Umfang oder Race-Bedingung in AJAX/getJSON

Question

Ich habe ein Stück von jQuery-Code, der mehrere getJSON() Anrufe in schneller Folge ruft:

var table = $("table#output"); 
for (var i in items) { 
    var thisItem = items[i]; 
    $.getJSON("myService", { "itemID": thisItem }, function(json) { 
     var str = "<tr>"; 
     str += "<td>" + thisItem + "</td>"; 
     str += "<td>" + json.someMember + "</td>"; 
     str += "</tr>"; 
     table.append(str); 
    }); 
} 

Wenn ich laufen diese gegen einen laggy Server, der Tisch mit den bevölkerten wird erwartet json.someMember Werte (sie kommen außerhalb der Reihenfolge: das stört mich nicht), aber die thisItem Spalte ist mit einer unvorhersehbaren Mischung von Werten aus verschiedenen Iterationen bestückt.

Ich gehe davon aus, dass dies etwas mit Umfang und Timing zu tun hat - die Callback-Funktion liest thisItem aus einem größeren Bereich? Habe ich recht? Wie verhindere ich das?

Meine aktuelle Problemumgehung ist, dass der JSON-Dienst eine Kopie seiner Eingaben zurückgibt - was zumindest nicht zufriedenstellend ist.

Answer 1

Scheint wegen der Schleife wie ein Problem mit dem Umfang zu sein. Versuchen Sie folgendes:

var table = $("table#output"); 
for (var i in items) { 
    var thisItem = items[i]; 
    $.getJSON("myService", { "itemID": thisItem }, (function(thisItem) { 
     return function(json) { 
      var str = "<tr>"; 
      str += "<td>" + thisItem + "</td>"; 
      str += "<td>" + json.someMember + "</td>"; 
      str += "</tr>"; 
      table.append(str); 
     } 
    })(thisItem)); 
} 

bearbeiten: alles, was ich tat, war Umfang thisItem zum $.getJSON Rückruf.

Answer 2

Javascript verwendet keinen Block für den Bereich. Scope basiert nur auf Funktionen.

Wenn Sie einen neuen Bereich möchten, müssen Sie eine neue interne Funktion deklarieren und sofort ausführen, dies ist die einzige Möglichkeit, einen neuen Bereich in Javascript zu erstellen.

var table = $("table#output"); 
for(var i in items) 
{ 
    (function(){ 
     var thisItem = items[i]; 
     $.getJSON("myService", { "itemID": thisItem }, function(json) 
     { 
      var str = "<tr>"; 
      str += "<td>" + thisItem + "</td>"; 
      str += "<td>" + json.someMember + "</td>"; 
      str += "</tr>"; 
      table.append(str); 
     }); 
    })(); 
}