jQuery zakres lub rasę warunek w AJAX/getJSON

Question

Mam kawałek kodu jQuery, który wywołuje kilka getJSON() połączeń w krótkim odstępie czasu:

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); 
    }); 
} 

Gdy uruchomię to na serwerze laggy, tabela zostanie wypełniona Oczekiwano wartości json.someMember (przybywają one poza kolejnością: nie mam nic przeciwko temu), ale kolumna thisItem jest zapełniona nieprzewidywalną mieszanką wartości z różnych iteracji.

Zakładam, że ma to jakiś związek z zakresem i czasem - funkcja oddzwaniania czyta thisItem z szerszego zakresu? Czy mam rację? Jak mogę temu zapobiec?

Moje bieżące obejście polega na tym, że usługa JSON zwraca kopię swoich danych wejściowych - co najmniej nie jest satysfakcjonujące.

Answer 1

Wygląda na to, że problem spowodował pętlę. Spróbuj tego:

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)); 
} 

Edycja: wszystko zrobiłem było zakres thisItem do $.getJSON zwrotnego.

Answer 2

Javascript nie używa bloku do zakresu. Zakres jest oparty tylko na funkcjach.

Jeśli chcesz nowego zakresu, musisz zadeklarować nową funkcję wewnętrzną i uruchomić go natychmiast, jest to jedyny sposób, aby utworzyć nowy zakres w JavaScript.

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); 
     }); 
    })(); 
}