在开始新的功能之前等待Ajax功能完成

时间:2014-08-15 14:22:50

标签: jquery ajax foreach

我有以下脚本 -

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

我哪里错了?

3 个答案:

答案 0 :(得分:2)

如果您确实需要同步处理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.");
  }
})

答案 1 :(得分:1)

修改,更新

添加了: 使用stringArray$.map()删除空字符串;在进一步处理之前检查$.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/

答案 2 :(得分:0)

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

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