在for循环语句下完成所有ajax调用后,是否可以运行代码?

时间:2013-06-06 07:26:41

标签: jquery ajax each

我有一个for循环语句,每个循环都会执行ajax调用。

$.each(arr, function(i, v) {
    var url = '/xml.php?id=' + v;
    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'xml',
        success: function(xml) {
            if ($(xml).find('Lists').attr('total') == 1) {
                // some code here
            }
        },
        complete: function() {
            // some code here
        }
    })
})

我想在循环下完成所有 ajax调用后运行代码,我试图将下面的代码放到最后一行,当ajax调用完成时不执行

    if (i == arr.length - 1) {
        // some code here
    }

因此,如果我有10次循环,则有10次ajax调用。我希望在完成10次ajax调用之后运行代码,有什么想法吗?

使用.ajaxComplete().done()来实现它会更好吗?

由于

2 个答案:

答案 0 :(得分:13)

尝试使用$.when()

var arr = [];
$.each(arr, function(i, v) {
    var url = '/xml.php?id=' + v;
    var xhr = $.ajax({
        url: url,
        type: 'GET',
        dataType: 'xml',
        success: function(xml) {
            if ($(xml).find('Lists').attr('total') == 1) {
                // some code here
            }
        },
        complete: function() {
            // some code here
        }
    });
    arr.push(xhr);
})

$.when.apply($, arr).then(function(){
    console.log('do')
})

答案 1 :(得分:0)

我遇到了类似的情况,但在循环内部,AJAX调用是在另一个函数调用(称为fetchData)中完成的。

所以我让fetchData函数返回来自AJAX调用的 Promise ,并使用 then 子句对其进行链接以处理响应。

Here's Plunker链接

$(document).ready(function() {
  var message = '';

  process();

  function process() {
    var promises = [];
    for (var i = 0; i < 3; i++) {
      var promise;
      (function (index) {
        promise = fetchData(index).then(function (response) {
          // do something with the response.
          message += 'Iteration ' + index + '\n';
        });
      })(i);

      promises.push(promise);
    }

    $.when.apply($, promises).then(function () {
      // do something after all the AJAX calls are completed.
      alert(message);
    });
  }

  function fetchData(param) {
    return $.ajax('data.json')
      .success(fetchDataSuccess)
      .error(fetchDataFailed);

    function fetchDataSuccess(response) {
      return response;
    }

    function fetchDataFailed(error) {
      console.error(error);
    }
  }
});