等待 Ajax 功能完成后再开始新功能答案

【问题标题】：Wait for Ajax function to complete before starting new one等待 Ajax 功能完成后再开始新功能
【发布时间】：2014-10-09 07:01:05
【问题描述】：

我有以下脚本 -

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 调用，然后停止，而不是在第一个调用完成后开始列表中的下一个调用。

我哪里出错了？

【问题讨论】：

见jsfiddle.net/arunpjohny/0dvsqkns/1

标签： jquery ajax foreach

【解决方案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.");
  }
})

【讨论】：

【解决方案2】：

在 $.when() 之后使用 .then() 函数。您也不能将它与多个 ajax 调用一起使用。

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

【讨论】：

【解决方案3】：

编辑，更新

添加：利用 $.map() 从 stringArray 中删除空字符串；在进一步处理之前检查 $.each() 处的空字符串

试试（这个模式）

$(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/

【讨论】：