如何通过jQuery和Queue发送ajax请求？

Question

嗯，我有一个“ID”列表，我需要为每个“ID”发送一个Ajax请求。 IDE是当请求完成时，运行以下Ajax请求。 所有这些与异步请求，因为否则，浏览器字面上“停止”，直到请求完成加载。

逻辑很简单： 我们在循环中创建一个循环，并为每个ID创建一个asinconica的Ajax请求。 问题是，异步Ajax请求阻止我访问全局变量ID。

例子：

// This list will always have 40 items/values. 
var ids = [12,3453,234,743,235,433, ..]; 
for (var index = 0; index < ids.length; index++) { 
    // This request take long time(40-60 seconds) 
    $.ajax({ 
     url  : 'http://website.com/id=' + ids[index], // See here how to call to global variable ids 
     success : function (response) { 
      // And here, i call the element '#element' and get and set the 'value text' 
      var currentTotal = parseInt($('#element').text()); 
      $'#element').text(currentTotal + response.total); 
     }, 
     async:true // See here, this is a Async request 
    }); 
} 

注意，每个请求都必须以前加载完成后发送，将永远是一个动态的名单，因为有时我会送不同的ID。

Answer 1

您可以试试。我已经删除了for循环，并且只有在前一次调用成功后才启动索引增加的下一个调用。

// This list will always have 40 items/values. 
var ids = [12,3453,234,743,235,433, ..]; 
var index = 0; 
RequestAjax(ids,index); 

function RequestAjax(ids,index) 
{  
    if(ids.length > index) 
    { 
    // This request take long time(40-60 seconds) 
    $.ajax({ 
     url  : 'http://website.com/id=' + ids[index], // See here how to call to global variable ids 
     success : function (response) { 
      // And here, i call the element '#element' and get and set the 'value text' 
      var currentTotal = parseInt($('#element').text()); 
      $'#element').text(currentTotal + response.total); 
      RequestAjax(ids,index++); 
     }, 
     async:true // See here, this is a Async request 
    }); 
    } 
} 

Answer 2

我觉得DinoMyte的回答很有用。 根据@DinoMyte的回答，您还可以使用.push()和.shift()来操作数组ids。

// This list will always have 40 items/values. 
var ids = []; 
Manipulate([12,3453,234,743,235,433]); 

function RequestAjax() 
{  
    if(ids.length > 0) 
    { 
    var id = ids.shift(); 
    // This request take long time(40-60 seconds) 
    $.ajax({ 
     url  : 'http://website.com/id=' + id, 
     success : function (response) { 
      // And here, i call the element '#element' and get and set the 'value text' 
      var currentTotal = parseInt($('#element').text()); 
      $'#element').text(currentTotal + response.total); 
      RequestAjax(); 
     }, 
     async:true // See here, this is a Async request 
    }); 
    } 
} 

function Manipulate(id) 
{ 
    var shouldRequest = false; 
    if(0 === ids.length){ 
     shouldRequest = true; 
    } 

    if(toString.apply(id) === '[object Array]'){ 
     ids = ids.concat(id); 
    }else if('number' === typeof id){ 
     ids.push(id); 
    } 

    if(shouldRequest === true && ids.length > 0){ 
     RequestAjax(); 
    } 
}