javascript - 使用 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() 调用周围放置一个 Promise 不会等待 Ajax 调用，因为它是异步的。
在 Ajax 调用周围放置一个等待它被发送，但不等待回调函数被执行。
在回调函数周围放置一个也不起作用，因为 Ajax 部分会等待它，但 getList() 由于异步性而继续运行。

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

提前致谢。

Answer 1

从 $.get 返回 deferred/promise

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

然后你可以在promise .done()方法中调用你的followup:

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