无论如何要使这个嵌套回调清洁？

Question

我正在寻找一种方法来使这组AJAX调用更清洁。 我尝试过使用$.when() ......但是我无法真正使用它。 我认为这是由于没有传递延迟对象...因为我的AJAX调用是在模型对象内部。

这是我到目前为止（一些代码被排除在外）：

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

getOrigin();

//Gets origin data
function getOrigin(){

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

   });
}

//Gets destination information
function getDestination(){

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


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

任何建议都会很棒！

编辑：我正在寻找类似$.when()解决方案。 基本上，我想在没有嵌套回调的情况下完成getOrigin()和getDestination()之后调用directions() 。

Answer 1

不要在共享范围中使用变量，只需将值从函数传递给函数即可。

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与任何你想要的this是。

Answer 2

user1689607的上述答案为如何改进回调安排提供了一个很好的建议。

我认为你可以进一步改进这个代码，而不仅仅是让回调更清晰。 首先，使用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();