Vòng lặp cuộc gọi jQuery Ajax mất tham chiếu biến cục bộ

Question

Tôi đang thực hiện một số cuộc gọi jQuery ajax trong vòng lặp. Mỗi lần một trong các cuộc gọi ajax trở lại, tôi cần tham chiếu một giá trị tương ứng với lệnh gọi ajax ban đầu. Mã hiện tại của tôi không hoạt động đúng cách, trong đó giá trị của biến số lskey đã bị thay đổi bởi các vòng lặp lặp lại tiếp theo.

Đây là mã:

for (var i = 0, len = localStorage.length; i < len; i++) { 
     var lskey = localStorage.key(i); 
     if (lskey.substr(0, 4) === 'form') { 
      var postdata = localStorage.getItem(lskey); // Get the form data 
      $.ajax({ 
       type: "POST", 
       async: "false", 
       url: "/Profile/PostForm", 
       data: postdata, 
       success: function (data) { 
        $('#rollinginfo').append('<br>' + data + ',key=' + lskey); 
        localStorage.removeItem(lskey); // Remove the relevant localStorage entry 
       } 
      , error: function (data) { $('#rollinginfo').append('<br />ERR:' + data); } 
      }); 


     } 
    } 

Vấn đề là lskey là được thay đổi mỗi lần vòng lặp thực hiện, và do đó gọi lại thành công không có một tham chiếu đến giá trị của lskey đã tồn tại vào thời điểm đó của cuộc gọi.

Làm cách nào để tham chiếu giá trị chính xác của lskey cho mỗi lần gọi lại thành công?

Answer 1

for (var i = 0, len = localStorage.length; i < len; i++) { 
    var lskey = localStorage.key(i); 
    if (lskey.substr(0, 4) === 'form') { 
     var postdata = localStorage.getItem(lskey); // Get the form data 
     $.ajax({ 
      type: "POST", 
      async: "false", 
      url: "/Profile/PostForm", 
      data: postdata, 
      local_lskey: lskey 
      success: function (data) { 
       $('#rollinginfo').append('<br>' + data + ',key=' + lskey); 
       localStorage.removeItem(this.local_lskey); // Remove the relevant localStorage entry 
      } 
     , error: function (data) { $('#rollinginfo').append('<br />ERR:' + data); } 
     }); 
    } 
} 

Điều này sẽ hiệu quả.

Answer 2

Bạn đã xem xét chuỗi các cuộc gọi AJAX chưa? Về cơ bản bạn có thể thực hiện một cuộc gọi AJAX, xử lý kết quả, sửa đổi lskey, vv Sau đó, khi bạn đã sẵn sàng, hãy tăng i và phát hành cuộc gọi AJAX thứ hai. Lặp lại theo cách này thay vì sử dụng vòng lặp for ...

Answer 3

Cuối cùng tôi đã thêm thông tin quan trọng vào máy chủ đăng và sau đó trả lại từ máy chủ ở định dạng JSON để chức năng thành công có thể chỉ cần tham chiếu đến khóa chứa trong phản hồi của máy chủ.

Answer 4

Bạn có thể đặt cuộc gọi ajax của bạn vào chức năng riêng của mình và vượt qua các giá trị lskey và postData trong. Bằng cách đó localStorage.removeItem(lskey) sẽ tham khảo các biến lskey trong bối cảnh của các chức năng chứ không phải là bối cảnh của vòng lặp.

Ví dụ

Khai báo hàm -

function postForm(postdata, lskey) { 
    $.ajax({ 
    type: "POST", 
    async: "false", 
    url: "/Profile/PostForm", 
    data: postdata, 
    success: function(data) { 
     $('#rollinginfo').append('<br>' + data + ',key=' + lskey); 
     localStorage.removeItem(lskey); // Remove the relevant localStorage entry 
    }, 
    error: function(data) { 
     $('#rollinginfo').append('<br />ERR:' + data); 
    } 
    }); 
} 

Sau đó, bạn có thể gọi chức năng của bạn từ vòng lặp của bạn -

for (var i = 0, len = localStorage.length; i < len; i++) { 
    var lskey = localStorage.key(i); 
    if (lskey.substr(0, 4) === 'form') { 
    var postdata = localStorage.getItem(lskey); // Get the form data 
    postForm(postdata, lskey); 
    } 
} 

Bạn cũng có thể khai báo hàm ngay trước khi vòng lặp (gán nó cho một biến) và sau đó gọi nó trong vòng lặp.

var postForm = function(postdata, lskey) { 
    $.ajax({ 
    type: "POST", 
    async: "false", 
    url: "/Profile/PostForm", 
    data: postdata, 
    success: function(data) { 
     $('#rollinginfo').append('<br>' + data + ',key=' + lskey); 
     localStorage.removeItem(lskey); // Remove the relevant localStorage entry 
    }, 
    error: function(data) { 
     $('#rollinginfo').append('<br />ERR:' + data); 
    } 
    }); 
} 
for (var i = 0, len = localStorage.length; i < len; i++) { 
    var lskey = localStorage.key(i); 
    if (lskey.substr(0, 4) === 'form') { 
    var postdata = localStorage.getItem(lskey); // Get the form data 
    postForm(postdata, lskey); 
    } 
}