Javascript 要使这个嵌套回调更干净吗？

我正在寻找一种方法使这组AJAX调用更干净。我尝试过使用

$.when（）

…但我无法真正让它工作。我认为这是因为没有传递延迟对象……因为我的AJAX调用在模型对象内部

这就是我到目前为止所做的（一些代码被排除在外，只是为了：

任何建议都很好

---

编辑：我正在寻找类似于

$.when（）

的解决方案。基本上，我想在

getOrigin（）

和

getDestination（）

都完成后调用

directions（）

，而不使用嵌套回调。

只需在函数之间传递值，而不是在共享范围内使用变量

var origin_form, destination_form; //assume string input from user

getOrigin();

function getOrigin(){
   model.searchFeature(origin_form, 1, getDestination);
}

function getDestination(origin){           
    model.searchFeature(destination_form, 1, function(data) {
        directions(origin, data);
    });
}

function directions(origin, destination){
    //Async call to request directions from google api
}

---

或者使用

Function.prototype.bind

，您可以进一步清理它

var origin_form, destination_form; //assume string input from user

getOrigin();

function getOrigin(){
   model.searchFeature(origin_form, 1, getDestination);
}

function getDestination(origin){  
    model.searchFeature(destination_form, 1, directions.bind(null, origin));
}

function directions(origin, destination){
    //Async call to request directions from google api
}

---

传递给

.bind（）

的第一个参数是

null

，因为我不知道是否要设置

directions（）

的

this

值。如果您这样做了，那么用您想要的任何内容替换

null

。

以上用户1689607的回答就如何改进 回拨安排

我认为您可以进一步改进此代码，而不仅仅是制作 然而，回调更干净。首先，使用camel case和jslint，然后：

// Use a closure/namespace for global abatement
MyNamespace = (function() {
  // Use a single 'var' declaration
  var originForm, 
      destinationForm, //assume string input from user
      destination, 
      origin;

  function init() {
    getOrigin();
  }

  //Gets origin data
  function getOrigin(){

     //ASYNC CALL
     model.searchFeature(origin_form, 1, function(data){
       //additional callback code excluded
       destination = data; 
       getDestination();

     });
  }

  //Gets destination information
  function getDestination(){
      //ASYNC CALL            
      model.searchFeature(destinationForm, 1, function(data){
          //additional callback code excluded
          destination = data;     
          directions(origin, destination);
      });
  }


  function directions(origin, destination){
    //Async call to request directions from google api
  }

  return {
    'init': init
  };
}());

MyNamespace.init();

---

我假设在其中一个函数中，您指的是

origin=data

，而不是

destination=data

（可能是第一个）。@user1689607是的，这是正确的。我做了编辑。让AJAX调用更干净：COMET和SOAP！巴杜姆钦-对不起，无法抗拒。：）@deceze：那真是太好笑了。：）使用单个var声明是否有一些优化，或者这只是一种约定？我总是倾向于根据变量的用途对其进行分组，因为这只是我的个人习惯。我不确定具体的性能影响，但您确实节省了一些字节。我认为这样做更重要的原因是为自己提供一个安全网。如果您在整个函数范围内声明变量，这些变量仍然会被提升到函数定义的顶部，这可能会引入一些微妙的bug。另外，感谢您对jslint的介绍。我不知道它的存在。我在寻找类似

$.when（）.done（）

的东西。原点和目标不相互依赖，但必须在两者都完成后调用

directions（）

。不幸的是，我似乎无法将

$.when（）

用于我的

$.ajax

抽象调用。谢谢你的建议。他们很有帮助。

// Use a closure/namespace for global abatement
MyNamespace = (function() {
  // Use a single 'var' declaration
  var originForm, 
      destinationForm, //assume string input from user
      destination, 
      origin;

  function init() {
    getOrigin();
  }

  //Gets origin data
  function getOrigin(){

     //ASYNC CALL
     model.searchFeature(origin_form, 1, function(data){
       //additional callback code excluded
       destination = data; 
       getDestination();

     });
  }

  //Gets destination information
  function getDestination(){
      //ASYNC CALL            
      model.searchFeature(destinationForm, 1, function(data){
          //additional callback code excluded
          destination = data;     
          directions(origin, destination);
      });
  }


  function directions(origin, destination){
    //Async call to request directions from google api
  }

  return {
    'init': init
  };
}());

MyNamespace.init();