2011-11-24 42 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; 
    } 
}