Вызов jQuery Ajax в цикле теряет ссылку на локальную переменную

Question

Я делаю несколько вызовов jQuery ajax в цикле.Каждый раз, когда возвращается один из вызовов ajax, мне нужно ссылаться на значение, соответствующее исходному вызову ajax.Мой текущий код не работает должным образом, так как значение переменной lskey было изменено в результате дальнейших итераций цикла.

Вот код:

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


        }
    } 

Проблема в том, чточто lskey изменяется каждый раз, когда выполняется цикл, и, следовательно, обратный вызов успеха не имеет ссылки на значение lskey, существовавшее на момент вызова.

Как мне ссылаться на правильное значениеlskey для каждого успешного обратного вызова?

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

Это должно работать.

Answer 2

В конце я добавил информацию о ключе в публикацию на сервере, а затем вернул ее с сервера в формате JSON, чтобы функция успеха могла просто ссылаться на ключ, содержащийся в ответе сервера.

Answer 3

Вы можете поместить вызов ajax в его собственную функцию и передать значения lskey и postData. Таким образом, localStorage.removeItem(lskey) будет ссылаться на переменную lskey в контексте функции, а не в контексте петля.

Пример

Объявить функцию -

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

Тогда вы можете вызывать свою функцию из вашего цикла -

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

Вы также можете объявить функцию непосредственно перед циклом (присвоить ее переменной), а затем вызвать ее внутри цикла.

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

Answer 4

Рассматривали ли вы цепочку вызовов AJAX? Обычно вы можете сделать один AJAX-вызов, обработать результат, изменить lskey и т. Д. Затем, когда вы будете готовы, увеличьте i и выполните второй AJAX-вызов. Зацикливание таким образом вместо использования for loop ...