javascript - 无论如何要让这个嵌套回调更干净吗？

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因为我不知道你是否想要 this directions() 的值要设置。如果这样做，则替换 null随心所欲this是。