等待async ajax请求完成

时间:2013-04-05 11:56:05

标签: jquery ajax loops asynchronous

我想写一个执行十几个异步ajax请求的函数,等待所有的完成然后返回聚合信息。像:

function countHealthy(urls) {
  var healthy = 0;
  for (var i = 0; i < urls.length; ++i) {
    $.ajax({url: urls[i], async: true, id: i})
    .done(function (data) { ++healthy; });
  }
  // Wait for all ajax to finish.
  return healthy;
}

PS:++健康线程安全吗?

5 个答案:

答案 0 :(得分:6)

Javascript没有线程,所以线程安全不是问题。你的return语句是问题,它需要进入ajax调用在完成时执行的回调。由于ajax异步发生,因为你的代码代表,return语句将在所有请求返回之前触发。

您可能需要查看query deferreds,这似乎是为此类事物而生的。直接来自该链接

function doAjax() {
  return $.get('foo.htm');
}

function doMoreAjax() {
  return $.get('bar.htm');
}

$.when( doAjax(), doMoreAjax() )
  .done(function() {
    console.log( 'I fire once BOTH ajax requests have completed!' );
  })
  .fail(function() {
    console.log( 'I fire if one or more requests failed.' );
  });

通过一些小的重构,您可以在大约2分钟内实现这一点。

或者,如果您控制服务器,则可以创建一个服务器端点,在一个请求中执行所有检查。

答案 1 :(得分:1)

你可以这样做:

var urls= ['url1', 'url2', 'url3', 'url4'];
function doTheUrl() {
    if (urls.length === 0) {
        alert('All urls are done now.');
        return;
    }

    var url = urls.pop();
    $.ajax({
        url: "/DoTheJob",
        complete: function () {
            doTheUrl();
        }
    });
};

答案 2 :(得分:0)

也许你可以试试这个。我只是运行一个空的while循环,以便在返回所有ajax调用之前不会返回return语句。

function countHealthy(urls) {
  var healthy = 0;
  var urlCount = urls.length;
  var numberOfAjaxCallsReturned = 0;
  for (var i = 0; i < urls.length; ++i) {
    $.ajax({url: urls[i], async: true, id: i})
      .done(function (data) { 
              ++healthy;
              numberOfAjaxCallsReturned++;
      });
    }
    while(numberOfAjaxCallsReturned!=urlCount)
    {
    }
    return healthy;
}

答案 3 :(得分:0)

如果您有一个复杂的页面,您将需要跟踪并等待特定的异步调用才能返回。这是因为其他非十字调用可能正在运行。

话虽这么说,对于简单的页面,你可以检查并等待那里没有电话。这个jQuery脚本检查每个季度,以查看每季度是否有当前的异步请求。一旦没有,您将继续。

    var WaitForAjax = function()
    {
        if (jQuery.active == 0){
        }
        else
        {
            setTimeout(WaitForAjax, 250);
        }
    }

    function RunIt()
    {
        //IssueAjaxCalls would be where you make all your Ajax calls.
        IssueAjaxCalls();

        WaitForAjax();

        //The KeepGoing function won't get called until there are no more Ajax calls pending.
        KeepGoing();
    }

答案 4 :(得分:0)

首先,你在每个for循环上发出ajax请求,这似乎有点浪费你的服务器资源。 如果该函数将被调用很多,那么我建议你重构你的代码 尽量减少查询。

无论如何,这里是我如何做到的

function countHealthy(urls) {

    var healthy = 0;
    var reqs = [];

    for (var i = 0; i < urls.length; ++i) {
        reqs.push(
            $.ajax({
                url: urls[i],
                id: i
            })
        );
    }
}


$.when.apply($, reqs).then(function() {
    // On success
    ++healthy;
}).fail(function() {
    // When failed
}).always(function() {
    // this will be run no matter the outcome
});

Haven没有机会尝试一下,所以我不确定我是否犯了语法错误等。 您的代码更改:

删除async = true,如果您之前在代码中的某处将其设置为false,请忽略此项。

你可以了解&#34; when.apply&#34;作品, source