jQuery phạm vi hoặc chủng tộc điều kiện trong AJAX/getJSON

Question

Tôi đã một đoạn mã jQuery mà gọi vài getJSON() cuộc gọi liên tiếp nhanh chóng:

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

Khi tôi chạy này chống lại một máy chủ lag, bảng được dân cư với giá trị json.someMember được mong đợi (chúng không đúng thứ tự), nhưng cột thisItem được điền bằng hỗn hợp giá trị không thể đoán trước từ các lần lặp khác nhau.

Tôi giả định đây là điều cần làm với phạm vi và thời gian - chức năng gọi lại đang đọc thisItem từ phạm vi rộng hơn? Tôi có đúng không? Làm thế nào để ngăn chặn điều này?

Giải pháp thay thế hiện tại của tôi là dành cho dịch vụ JSON trả lại bản sao các dữ liệu đầu vào - điều không hài lòng khi nói ít nhất.

Answer 1

Có vẻ như vấn đề phạm vi do vòng lặp. Hãy thử điều này:

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

Sửa: tất cả tôi đã làm là phạm vi thisItem đến $.getJSON gọi lại.

Answer 2

Javascript không sử dụng khối cho phạm vi. Phạm vi chỉ dựa trên chức năng.

Nếu bạn muốn có một phạm vi mới, bạn phải khai báo một hàm bên trong mới và chạy nó ngay lập tức, đây là cách duy nhất để tạo một phạm vi mới trong 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); 
     }); 
    })(); 
}