使用 JQuery，如何在继续之前等待 AJAX 调用及其回调完成？

Question

我的问题与this one 类似，但我无法用这些答案解决它。

简而言之，在页面加载时，ajax 调用会生成一个下拉选择元素，然后根据某些参数设置其默认值。
代码是这样的：

getList('country', null, q, 'category:customer', null);  
newReportSelection.apply($("#report"));  

function getList(field, val, q, fq, default_value) {
    $.get(... {  
      // call info
    },  function(result) {
      // appending the dropdown to DOM
    });
};

newReportSelection = function () {
    // determine and select default option
}  

getList 在不同的地方使用，所以我不能将这个（特定于页面加载）newReportSelection() 代码添加到 ajax 回调函数中。
在 getList() 调用周围放置一个承诺不会等待 Ajax 调用，因为它是异步的。
在 Ajax 调用周围放置一个等待它被发送，而不是等待回调函数被执行。
在回调函数周围放置一个也不起作用，因为 Ajax 部分等待它，但 getList() 由于异步性而继续运行。

即使在 Ajax 调用和回调函数上链接承诺有效，这看起来也是一个非常肮脏的解决方法并且不可取。
我有没有办法让 newReportSelection() 调用等到整个 getList() 完成，而无需手动将 Ajax 调用设置为async: false？

提前致谢。

Answer 1

从 $.get 返回延迟/承诺

function getList(field, val, q, fq, default_value) {
  return $.get(... {  
    // call info
  },  function(result) {
    // appending the dropdown to DOM
  });
};     

那么你可以在promise.done()方法中调用你的后续：

getList('country', null, q, 'category:customer', null).done(function() {
    newReportSelection.apply($("#report")); 
});

Answer 2

var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();

$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
  console.log( v1 ); // v1 is undefined
  console.log( v2 ); // v2 is "abc"
  console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
});

d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );

从https://api.jquery.com/jquery.when/中提取