0

我正在寻找一种方法来使这组 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(). 基本上，我想directions() 在两者之后调用，getOrigin()并且getDestination()在没有嵌套回调的情况下完成。

4

2 回答 2

1

上面 user1689607 的回答对如何改进回调安排给出了很好的建议。

但是，我认为您可以进一步改进此代码，而不仅仅是使回调更清晰。一方面，使用骆驼案例和 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();
于 2012-11-15T17:23:06.413 回答
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因为我不知道您是否想要设置的this值directions()。如果你这样做了，那么null用你想this成为的任何人来代替。

于 2012-11-15T17:12:16.250 回答