2011-11-24 43 views
0

我有這個JavaScript代碼,我想改變成一個隊列系統。目前我不得不像這樣編碼。當有很長一段時間的請求時,它會變得混亂。 注意:我的函數請求返回json對象。 將異步設置爲false不用於跨域jsonp調用,因此無法工作。 調用必須按此順序進行。 jquery隊列不會工作。需要Javascript ajax隊列系統。跨域jsonp。我將如何做到這一點。

var customers; 
var orders; 
var products; 
function GetCustomers(){ 
      $.ajax({ 
       url: somecrossdomainurl?calback=GetCustomerCallback, 
       dataType: 'jsonp', 
       async: false 
      }); 
} 

function GetCustomerCallback(data){ 
      customers=data; 
      GetCustomersOrder(); 
     } 

function GetCustomersOrder(){ 
       $.ajax({ 
        url: somecrossdomainurl?calback=GetCustomersOrderCallback, 
        dataType: 'jsonp', 
        async: false 
       }); 
     } 

function GetCustomersOrderCallback(data){ 
    orders = data; 
    GetOrderProducts(); 
} 

function GetOrderProducts(){ 
     $.ajax({ 
      url: somecrossdomainurl?calback=GetOrderProductsCallback, 
      dataType: 'jsonp', 
      async: false 
     }); 
} 

function GetOrderProductsCallback(data){ 
    products = data; 
    DisplayCustomersAndOrder(); 
} 

function DisplayCustomersAndOrder(){ 
    //loop round customer,order,products and display info 
} 


//I want to do something like this: 

function DisplayData(){ 
    var queue; 

    queue.GetCustomer(); 
    queue.GetCustomersOrders(); 
    queue.GetOrderProducts(); 
    queue.DisplayCustomersAndOrder(); 
    queue.Start() 
} 

任何建議

+0

使用jQuery的[遞延對象(http://api.jquery.com/category/deferred-object/)。 –

+0

會使用jsonp工作 – zee

+0

可能它是一個簡化的API,'$ .ajax'總是返回一個承諾對象。試一試 :) –

回答

0

這是使用承諾異步隊列的實現。 https://gist.github.com/thejuan/5697765

它是在TypeScript中,但很少做到變成純JS。

它繼續出錯,如果你不希望它還有比這更簡單的解決方案(只需使用則鏈中的每個您的通話)

注:需要jQuery的1.8或更高時,他們做出。然後的行爲 「正確」

export class AsyncExecutionQueue{ 

    private tail: JQueryPromise = $.Deferred().resolve(); 

    public enqueue(cmd:()=>any): JQueryPromise { 

     console.log("Queuing Command"); 
     var next = $.Deferred(); 
     var client = $.Deferred(); 
     this.tail.always(() => { 

      try { 

       var result = cmd(); 
       if (result.done && result.fail) { 
        result 
        .done(client.resolve, next.resolve) 
        .fail(client.reject, next.resolve); 
       } 
       else { 
        client.resolve(result); 
        next.resolve(); 
       } 
      } 
      catch (e) { 
       client.reject(e); 
       next.resolve(); 
      } 
     }); 
     this.tail = next; 
     return client; 
    } 
}