Javascript 如何使用jQuery等待来自回调的异步调用？

我正在使用基于jQuery的组合框替换，我必须定义一个回调来处理从json rest web服务接收的数据

问题是，在同一个回调中，我必须发出另一个GET请求来获取匹配记录的总数，以便select2可以决定是否必须加载更多结果（它具有无限滚动功能）

代码如下所示：

$("#country").select2({
  ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
    url: 'http://localhost:9000/api/countries',
    dataType: 'json',
    data: function(term, page) {
      return {
        filter: term,
        page: page,
        len: 10
      };
    },
    results: function(data, page) {
      return {
        results: data, more: ????
      };
    }
  }
});

results: function (data, page) {
  var more = (page * 10) < data.total; // whether or not there are more results available
  // notice we return the value of more so Select2 knows if more results can be loaded
  return {results: data.movies, more: more};
}

问题是我不知道如何发出异步请求（我发出的是跨域请求，文档说在这种情况下不支持异步），然后等待它完成，然后从结果回调返回

select2页面中的示例如下所示：

$("#country").select2({
  ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
    url: 'http://localhost:9000/api/countries',
    dataType: 'json',
    data: function(term, page) {
      return {
        filter: term,
        page: page,
        len: 10
      };
    },
    results: function(data, page) {
      return {
        results: data, more: ????
      };
    }
  }
});

results: function (data, page) {
  var more = (page * 10) < data.total; // whether or not there are more results available
  // notice we return the value of more so Select2 knows if more results can be loaded
  return {results: data.movies, more: more};
}

结果：函数（数据，页面）{
var more=（第*10页）

问题是，我的web服务返回来自不同端点的记录总数，因此我必须发出另一个请求，如：http://localhost:9000/api/countries？filter=term

---

有什么想法吗？

您不能等待javascript中的异步回调。您必须重新构造代码，以便根据实际回调的异步响应完成所有后续工作

如果需要进行多个连续的ajax调用，则发出第一个ajax调用，在第一个ajax调用的成功处理程序或响应处理程序中，发出第二个ajax调用，在第二个ajax调用的响应处理程序中，执行您想对数据执行的任何操作

如果您看到您正在使用

。请选择2（）

框架。在框架中，结果回调是ajax调用返回的地方。在该函数中，您将使用普通jQuery ajax调用发出第二个ajax调用，在第二个ajax调用的成功处理程序中，您将对返回的最终数据执行您试图执行的任何操作。您将无法使用结果回调的正常返回值，因为在需要返回的点上还没有最终数据。我认为这只是

.select2（）

的一个限制，因为它只支持一个ajax调用。这只是意味着你不能使用一点内置行为，必须自己用自己的代码来应用结果，但这并不意味着你必须扔掉

。选择2（）

，其他所有你使用它的东西

---

看起来您可能只想直接挂接

change

事件，而不使用其内置的ajax功能，因为如果您需要两个序列化的ajax调用，它看起来并不能为您提供很多功能。

除了jfriend00的答案（非常好，顺便说一句）之外，我发现了以下解决方法，这基本上是同步发出请求，尽管jquery文档看起来可以工作（至少在chromium 18.0和jquery 1.8.0中）

我只是把它贴出来，以防有人发现它有用

var config = {
  url: 'http://localhost:9000/api/countries',
  len: 20,
  term: ''
}
$("#country").select2({
  ajax: { 
    url: config.url,
    dataType: 'json',
    data: function(term, page) {
      config.term = term;
      return {
        filter: term,
        page: page,
        len: config.len
      };
    },
    results: function(data, page) { // parse the results into the format expected by Select2.
      var more = false;
      $.ajax({
        url: config.url + '/count',
        data: { filter: config.term },
        cache: false,
        async: false,
        success: function(resp) {
          var total = parseInt(resp, 10);
          more = (page * config.len) < total;
        },
        async:false
      });
      return {
        results: data, more: more
      };
    }
  }
});

var配置={
网址：'http://localhost:9000/api/countries',
len:20，
术语：“”
}
$（“#国家”）。选择2({
ajax:{
url:config.url，
数据类型：“json”，
数据：功能（术语，第页）{
config.term=术语；
返回{
过滤器：术语，
第页：第页，
len:config.len
};
},
结果：函数（数据，页面）{//将结果解析为Select2所需的格式。
var more=假；
$.ajax({
url:config.url+'/count'，
数据：{filter:config.term}，
cache:false，
async:false，
成功：功能（resp）{
var total=parseInt（分别为10）；
更多=（page*config.len）<总计；
},
异步：false
});
返回{
结果：数据，更多：更多
};
}
}
});

我研究了select2上的源代码，最终得出了这个解决方案

var ajax = {
  url: 'http://localhost:9000/api/countries',
  len: 3,
};

$("#country").select2({
  query: function(options) {
    var data = {
      filter: options.term,
      page: options.page,
      len: ajax.len
    };
    $.ajax({
      url: ajax.url,
      data: data,
      dataType: 'json',
      type: 'GET',
      success: function(data) {
        $.ajax({
          url: ajax.url + '/count',
          data: { filter: options.term },
          dataype: 'json',
          success: function(resp) {
            var total = parseInt(resp, 10);
            var more = (options.page * ajax.len) < total;
            options.callback({results: data, more: more});
          }
        });
      }
    });
  },
});

var ajax={
网址：'http://localhost:9000/api/countries',
蓝：3，
};
$（“#国家”）。选择2({
查询：功能（选项）{
风险值数据={
过滤器：options.term，
页面：options.page，
len:ajax.len
};
$.ajax({
url:ajax.url，
数据：数据，
数据类型：“json”，
键入：“GET”，
成功：功能（数据）{
$.ajax({
url:ajax.url+'/count'，
数据：{filter:options.term}，
数据类型：“json”，
成功：功能（resp）{
var total=parseInt（分别为10）；
var more=（options.page*ajax.len）

如您所见，当te第一次获取（ajax.url）完成时，我发出另一个请求（ajax.url+'/count'），只有当第二个请求完成时，我才调用options.callback，有效地序列化两个ajax调用

---

事实上，有更多的功能，例如限制和删除无序响应，我也只是移植了它们，但为了不使示例复杂化，我将它们从这个响应中删除…

我理解您的意思，并且担心这将是我问题的唯一答案（+1表示真诚：-）。问题是我无法控制select2的功能（我的意思是说，没有分叉），你能想出其他方法在给定的情况下实现它吗？@opensas-如果你试图解决的问题是如何在使用

时连续调用两次ajax。select2

，我已经在我的答案末尾添加了这一点。回答很好jfriend00，我将看一看select2代码，看看我是否能够成功地处理两个序列化的ajax调用，同时我使它能够处理一个同步请求。。。看看我自己的答案…

aysnc:false

对用户来说真的很不友好。在ajax调用完成之前，它会锁定浏览器（不会响应任何UI交互）。是希亚