等待Ajax函数完成后再开始新的

Question

我有以下脚本-

function getdata(stringArray, Net) {
            if (stringArray, [0] != "") {
                var processing = false;
                for (var i = 0; i < (stringArray, i++) {
                    var username = (stringArray, [i];
                    if (processing === false) {
                        processing = true;
                        $.when(
                            $.ajax({
                                type: "post",
                                contentType: "application/json; charset=utf-8",
                                url: "Default.aspx/getdata",
                                data: JSON.stringify({ test: 'test' }),
                                dataType: "json",
                                success: function (data) {
                                    var json = data.d;
                                    FinalJson = json;
                                    doStuff(Net);
                                },
                                error: function (err) {
                                    alert("Error please retry.");
                                }
                            })
                        ).done(function () {
                            processing = false;
                        });
                    }
                }
            } else {
            }
        };

在stringArray中，将有不同数量的字符串。对于每个字符串，我想做一个Ajax调用，但是要等到调用完成后再开始一个新的。

我认为通过添加processing变量并在进入函数时将其初始设置为false，然后在ajax调用之前将其设置为true，在.done设置处理为false将实现此目标。

由于某种原因，它正在触发第一个Ajax调用，然后停止，而不是在第一个调用完成后开始列表中的下一个调用。

我哪里错了?

Answer 1

如果您确实需要同步处理ajax请求(一次一个)，您可以设置选项

async: false

所以你的请求看起来像:

$.ajax({
  type: "post",
  contentType: "application/json; charset=utf-8",
  url: "Default.aspx/getdata",
  async: false,
  data: JSON.stringify({ test: 'test' }),
  dataType: "json",
  success: function (data) {
    var json = data.d;
    FinalJson = json;
    doStuff(Net);
  },
  error: function (err) {
    alert("Error please retry.");
  }
})

Answer 2

编辑，更新

补充道:使用$.map()从stringArray中删除空字符串;在进一步处理

之前，检查$.each()处是否有空字符串。

Try (this pattern)

$(function () {
    // e.g. , with `html` : `<textarea></textarea>`
    var stringArray = ["","a", "b", "c","", "1", "2", "", "3"];
    var request = function (_string) {
        return $.ajax({
            url: "/echo/json/",
            type: "POST",
            data: {
                json: JSON.stringify({
                    "d": _string
                })
            }
        });
    };
    var Net = [];
    var doStuff = function (n) {
        // do stuff 
        // when all requests complete
        $.each(n, function (k, v) {
            $("textarea").append(v + "n");
        });
    };
    // remove `""` from `stringArray`
    stringArray = $.map(stringArray, function(val, idx) {
      return val != "" ? [val] : null
    });
    $.each(stringArray, function (k, v) {
      // `""` removed from`stringArray` above ,
      // check again
      if (v != "") {
        $.when(request(v))
            .done(function (data, textStatus, jqxhr) {
              if (textStatus === "success" 
                 && window.confirm("at index " 
                    + k + " of " + stringArray.length 
                    + " asynchronous requests supplied by `stringArray`,"
                    + "continue")) {
                // do stuff 
                // when each request completes
                var json = data.d;
                // FinalJson = json;
                Net.push(data.d);
                if (Net.length === stringArray.length) {
                    // do stuff 
                    // when all requests complete
                    alert(textStatus + " " + Net.length 
                    + " requests completed");
                    doStuff(Net);
                };
            };
        })
        .fail(function (jqxhr, textStatus, errorThrown) {
            console.log("error: " + textStatus, errorThrown);
            $("textarea")
                .val(jqxhr.getAllResponseHeaders() 
                 + "n" + jqxhr.status + "n" + textStatus 
                 + "n" + errorThrown + "n" + jqxhr.responseText)
        });
      };
    });
});

jsfiddle http://jsfiddle.net/guest271314/L3jbvnex/

Answer 3

在$.when()之后使用。then()函数。你也可以在多个ajax调用中使用它。

$.when(
    $.ajax(....),
    $.ajax(....)
).then(someFunction);