如何通過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(); 
    } 
}