無論如何，使這個嵌套的回調更清潔？

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要設置的值。如果你這樣做，然後用你想要的this來代替null。

Answer 2

上面的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();