如何知道 JQuery 每个循环中的所有 ajax 调用何时完成？答案

【问题标题】：How to know when all the ajax calls in JQuery each loop are completed?如何知道 JQuery 每个循环中的所有 ajax 调用何时完成？
【发布时间】：2016-12-05 11:04:21
【问题描述】：

我在 JQuery 中有一个 each 循环，我在其中触发了一个 ajax 请求。我想在所有 ajax 调用执行完成后显示一条成功消息。

我的代码如下，

$('.container input:checked').each(function() {
  json_data = $(this).parent().parent().find('.case_json').html()
  $.ajax({
    type: "POST",
    url: "/some_action",
    data: { json_data : json_data },
    success: function(data) {
      console.log('saved')
    }
  })
}).promise().done( function(){ $('#import_message').show().addClass('alert alert-success').html('Data imported successfully!') } );

但代码的问题是我的成功消息在 ajax 调用执行完成之前就显示出来了。

我做错了什么？还是我需要改变我的实施方式？

【问题讨论】：

当您使用 jQuery 时，请查看使用 jquery.when()
我的猜测是，当前第一个请求完成后，它会返回一个承诺并执行成功消息。
也许，你需要github.com/caolan/async
显示的代码根本不应该运行：你有几个无与伦比的关闭})。
@nnnnnn 我的错！修正了代码！我在这里遵循了接受的答案stackoverflow.com/questions/6591700/… 但我仍然觉得必须有更好的方法来做到这一点！我这里没有大局。

标签： javascript jquery ajax

【解决方案1】：

我认为您想构建一个承诺数组，然后使用 $.when.apply。这里也有类似的问题：What is cleanest way to turn Array of JQuery Promises into a JQuery Promise of an Array?.

【讨论】：

【解决方案2】：

你需要结合使用 $.map 函数和 $.when，它应该是这样的：

$.when.apply($, $('.container input:checked').map(function() {
  json_data = $(this).parent().parent().find('.case_json').html()
  return $.ajax({
    type: "POST",
    url: "/some_action",
    data: { json_data : json_data },
    success: function(data) {
      console.log('saved')
    }
  })
}))
.done( function(){ 
    $('#import_message').show().addClass('alert alert-success').html('Data imported successfully!') 
} );

Map 函数会创建一个 defereds 数组，这个数组被传递给 $.when 函数，问题是它不支持数组作为参数，但支持任意数量的参数，所以我们可以使用 .apply()它接受一系列承诺并作为参数传递给函数。

【讨论】：

工作就像一个魅力！