使用Javascript排隊Ajax請求？

Question

我想每秒執行一次Ajax請求。我的下一個代碼完美工作。

window.onload = function() { 
     setTimeout(doStuff, 1000); //wait before continuing 
    } 

    function doStuff() { 
     $.ajax({ 
      // ... 
     }); 
     setTimeout(doStuff, 1000); 
    }; 

但在這一刻，如果我使用像小提琴手的工具來阻止我的請求，系統會繼續發送新的Ajax請求。我想排隊他們，併發送我的下一個Ajax請求後，只有我的服務器的答案。我怎樣才能做到這一點 ？

Answer 1

調用成功回調裏面的setTimeout：

function doStuff() { 
    $.ajax({ 
     // ... 
     success: function(result) { 
      // ... 
      setTimeout(doStuff, 1000); 
     } 
    }); 
} 

Answer 2

使用異步使Ajax請求等待，直到一個完成第一

jQuery.ajax({ 
    url: "query.php?Time="+myTimestamp(), 
    async: false, 
    success: function(data){ 
     jQuery.ajax({ 
      url: "query.php?Time="+myTimestamp(), 
      async: false, 
      success: function(data){ 

      } 
     }); 
    } 
}); 

Answer 3

我用：http://code.google.com/p/jquery-ajaxq/生產應用程序。

我已經自定義了代碼來中止運行ajax請求。

• Navigational Ajax（導航到屏幕） - 使用中止。

• 數據提交 - 使用隊列。可以有不同名稱的不同隊列。

Answer 4

只需推動觸發之前的請求的成功處理程序的下一個請求：

function doStuff() { 
    $.ajax({ 
     // ... 
     success: function(data) { 
      // your other code 
      setTimeout(doStuff, 1000); 
     } 
    }); 
}; 

Answer 5

我只是跑成一個類似的問題並解決了它，所以我想我會分享我的答案。

這裏是我做過什麼：

//全局變量：

var ajaxQue = []; //array containing immediate que of ajax object request to be fired off 
var ajaxCache = {}; //object holding ajax requests. 
var ajaxThreadActive = 0; //var for indicating if the ajaxQue if currently firing off or not. 



//get the last (newest) ajax Request 
function getLastRequest() { 
    for (i in ajaxCache) { 
     ajaxQue.push(ajaxCache[i]); 
     delete ajaxCache[i]; 
     return; //aim to only get one request at a time inorder to catch more requests 
    } 
    //if no items in the cache exist, will come here 
    ajaxThreadActive = 0; //ajax queue is now empty 
} 

//put an ajax request in an obj with a specific id so that if a newer ajax request is created before the ajax requests are finished sending, it will replace the old one 
function queRequest(ajaxObj, id) { 
    if (arguments.length != 2) { //id argument is optional 
     id = uuid++; //create unique id as default 
    } 
    if (id in ajaxCache) { 
     console.log('duplicate request'); 
    } 
    ajaxCache[id] = ajaxObj; 
    if (ajaxThreadActive == 0) { 
     ajaxThreadActive = 1; 
     getLastRequest(); //retrieve most 'updated' ajax request 
     fireOffAjaxQue(); 
    } else { 
     return 'ajax thread is running'; 
    } 
} 


//fire off the ajax queue 
function fireOffAjaxQue() { 
    if ((ajaxQue.length > 0) && ajaxThreadActive == 1) { //an if check on the thread active incase I want to close this from another place in code 
     $.ajax(ajaxQue[0]).always(function() { 
      setTimeout(function() { 
       getLastRequest(); //retrieve most 'updated' ajax request 
       fireOffAjaxQue(); 
      }, 50); //fire off another ajax request since this one has been completed. 
     }); 
     ajaxQue.shift(); //perform this immediately after the ajax request is sent, will execute before the .always() function 
    } 
} 

用法很簡單，而不是你在jQuery的通常做：

$.ajax({url: 'someplace.php', 
     data: dataVar, 
     success: function(data) {...}); 

這種變化是：

//create ajax object 
var ajaxObj = {url: 'someplace.php', 
       data: dataVar, 
       success: function (data) {...}}; 
//send ajax object to que 

然後將其與該發送到闕：

queRequest(ajaxObj); //send to que without an id since this is a unique request 
// *******OR******** 
queRequest(ajaxObj, id); //send to the que with an id IF this is to replace any 'older' requests of the same id 

我已經包含了AjaxCache持有最新 Ajax請求。即如果您有一個功能在用戶的按鍵上發送重複的請求，有時您只需發送最新的最新請求（如表單信息）。在這個管理器的製作方式中，它處理具有關聯ID（可選）的請求，以便新請求可以通過用相同ID覆蓋請求來替換舊請求。

//for an example, I use it like this in my webpage 
queRequest(ajaxObj, 'table1Data'); 

現在，如果隊列仍然發射了我就與'table1Data'任何申請只覆蓋ajaxObj id爲'table1Data'，因此只發送Ajax請求的最小量。