jquery abort（）ajax請求之前發送另一個

Question

基於：Abort Ajax requests using jQuery ...在inventory_search（） - 在發出ajax請求之前，如何檢查當前請求並在發出新請求之前終止（）它們？或者...有沒有更好的方法來做到這一點？

<script type="text/javascript"> 

    $(function() { 
     $('form#internal_catalog').change(function() { 
      inventory_search(); 
     }); 
    }); 

    function inventory_search() { 
     var search_data = $('form#internal_catalog').serialize(); 
     var a = $.ajax({ 
      type: 'post', 
      url: '/test.php', 
      data: search_data, 
      success: function(data) { 
       $('#catalog').html(data); 
      } 
     }); 
    } 

</script> 

Answer 1

創建所有請求的數組隊列。然後，如果您發現需要中止所有現有請求的點，則可以循環訪問數組，並在所有未決請求中調用abort。應該很簡單。

儘管另一種方式是隻保留一個內部標誌，指示請求是否正在處理中，如果有請求則跳過該請求。或處理你認爲合適的方式。

編輯：檢查是否有類似的情況這太問題：How to avoid 3 ajax calls?

編輯2：所以我什麼，你可以做的是有你添加所有的AJAX調用數組。這基本上只是做一個XmlHttpRequest，這是從ajax調用返回的。因此，

requests.push(
    $.ajax({ 
     type: 'post', 
     url: '/test.php', 
     data: search_data, 
     success: function(data) { 
      $('#catalog').html(data); 
     } 
    })); 

這會將您的所有請求添加到您可以在某處定義的請求數組。然後，當你想殺死所有未決的請求時，你可以循環訪問該數組，並調用abort來終止請求。

for(var i = 0; i < requests.length; i++) 
    requests[i].abort(); 

或者只是在您的函數外定義一個變量，該變量是一個指示是否正在發出請求的標誌。您甚至可以使其更具體並存儲搜索數據，並且只跳過對同一數據有未決請求的請求，並允許其他請求使用不同的數據。

希望這足以讓你開始。

Answer 2

使用全局變量來保存當前請求的句柄。在這種情況下，聲明var a在功能的外面並使其成爲全局。在調用ajax檢查之前，它不是null。如果它不爲空abort它明智地分配它與新的ajax。在成功/完成事件中，確保清除變量a。可能不是最好的解決方案，但效果最好。

Answer 3

很容易與jQuery AjaxManager Plugin：

$.manageAjax.create('unique_identifier',{ 
queue:'clear',cacheResponse:false,maxRequests:1,abortOld:true 
}); 
jQuery.manageAjax.abort('unique_identifier'); 
jQuery.manageAjax.clear('unique_identifier'); 
jQuery.manageAjax.add('unique_identifier',{success: function(data) {}}); 

Answer 4

自旋子的回答是偉大的，中止所有的Ajax查詢，但不是偉大的跟蹤只是其中的一個。

我經常發現自己做這樣

var ajax_request; 
function do_something() 
{ 
    if(typeof ajax_request !== 'undefined') 
     ajax_request.abort(); 
    ajax_request = $.ajax({ 
     type: 'post', 
     url: '/test.php', 
     data: search_data, 
     success: function(data) { 
      $('#catalog').html(data); 
     } 
    }); 
}