将 .each() 与 AJAX 一起使用，等待循环完成答案

【问题标题】：Using .each() with AJAX, wait until loop is done将 .each() 与 AJAX 一起使用，等待循环完成
【发布时间】：2016-12-12 05:20:10
【问题描述】：

对于选中的每个复选框，我需要执行一个 AJAX 请求，该请求在每个循环内处理。当所有的 AJAX 请求都完成后，我需要执行一个后续函数。

复选框的数量总是可变的，如果复选框被选中，我只需要运行 AJAX。

HTML：

<input type="checkbox" class="checkbox" val="1" />
<input type="checkbox" class="checkbox" val="2" />
<input type="checkbox" class="checkbox" val="3" />
<input type="checkbox" class="checkbox" val="4" />
<input type="checkbox" class="checkbox" val="5" />

<button id="btn1">Click Me</button>

jQuery (v2.1.4)

$(document).on('click', '#btn1', function() {
    $('.checkbox').each(function() {
         // We only want the checked boxes
   if ($(this).is(':checked')) {
             // Do the thing
             $.get('test.html', function(data) {
                 console.log('Response received: ' + $(this).val());
             });
         }
    });
    console.log('All responses received');
});

我可以使用什么来延迟最终回调（在本例中为“收到所有响应”），直到所有 AJAX 请求都完成？

JSFiddle：https://jsfiddle.net/sjkhh43x/

【问题讨论】：

标签： jquery

【解决方案1】：

创建一个由每个$.get 返回的promise 数组，并在全部解决后使用$.when 运行代码

$(document).on('click', '#btn1', function() {
  var promises = $('.checkbox:checked').map(function() {
    var $input = $(this)
    return $.get('data.html', function(data) {
      console.log('Response received: ' + $input.val());
    });
  }).get();

  $.when.apply(null, promises).done(function() {
    console.log('all done')
  })

});

DEMO

【讨论】：