Question

说我有这个功能：

function testAjax(url) {
  return $.ajax({
    url: url,
    type: 'GET'
  });
}

现在我有许多节点（我正在使用D3），我希望循环播放。每个人可能有也可能没有关联的文件。要查明是否存在，我会在所选节点上获取URL，检查返回的数据，如果它有文件/文件，我将其添加到文件数组中。然后，我希望仅在完成每个节点并检查它是否有文件后才记录文件数组。

其余代码与此类似：

var allFiles = [];
nodes.each(function(d) {
      testAjax(d.url)
        .success(function(data) {
          if (data.files) {
            if (data.files.length > 0) {
              for (var i = 0; i < data.files.length; i++) {
                allFiles.push(data.files[i])
              }
            }
          }
        })
    })
//Here is where I want to log/use (call a function passing the files array as an argument) the array of files after its been completed.

Answer 1

创建承诺数组并在解析完整数组时使用$.when()来解析

var allFiles = [];
var promises = [];

nodes.each(function(d) {
   // reference to promise
   var req=  testAjax(d.url)
        .success(function(data) {
          if (data.files) {
            if (data.files.length > 0) {
              for (var i = 0; i < data.files.length; i++) {
                allFiles.push(data.files[i])
              }
            }
          }
        })
    });
   // push to array
   promises.push(req);
});
$.when.apply(null, promises).then(function(){
    // all promises have been resolved here

}).fail(function(){
    alert('Opps ... something went wrong with one of the requests')
})

Answer 2

您可以使用成功回调中的检查来查看您是否已到达nodes数组的末尾：

var allFiles = [];
nodes.each(function(i, d) {
      testAjax(d.url)
        .success(function(data) {
          if (data.files) {
            if (data.files.length > 0) {
              for (var i = 0; i < data.files.length; i++) {
                allFiles.push(data.files[i])
              }
            }
          }
          // Check if the length-1 is equal to the index
          if (i == nodes.length-1) doneLooping();
        })
    })

doneLooping()应该在最后一次回调完成时调用。

Here是.each()函数的有用页面。

Answer 3

请尝试类似

的内容

var allFiles = [];
var totalNodes = 0,
    totalSuccessResponses = 0;
nodes.each(function(d) {
   totalNodes++;
   testAjax(d.url)
       .success(function(data) {
           totalSuccessResponses++;
           if (data.files) {
               if (data.files.length > 0) {
                   for (var i = 0; i < data.files.length; i++) {
                       allFiles.push(data.files[i])
                   }
               }
           }
           if(totalNodes == totalSuccessResponses) {
               // callback function() 
               // is excuted after all success responses received
           }
       })
})

Answer 4

我会使用$.when，以确保在执行任何治疗之前所有承诺都已得到解决。

以下是一个示例（与您的代码没有直接关系，但使用模拟调用）：

var test = function (i) {
    var result = $.Deferred();
    setTimeout(function () {
        console.log(i + ": done");
        result.resolve(i);
    }, 1000 + Math.floor(Math.random() * 2000));
    return result;
};

// with apply to allow the possible usage of $.map on an array of objects, and $.then on each promises
$.when.apply($, [test(1), test(2), test(3)]).done(function (i1, i2, i3) {
    console.log(i1 + " " + i2 + " " + i3 + " are done");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您想在调用之前对ajax调用结果执行后处理，那么您可以将上述方法与$.then和$.map

结合使用

完成所有ajax调用后如何运行函数

4 个答案: