jquery abort() ajax 请求在发送另一个之前答案

【问题标题】：jquery abort() ajax request before sending anotherjquery abort() ajax 请求在发送另一个之前
【发布时间】：2011-03-19 18:48:24
【问题描述】：

基于：Abort Ajax requests using jQuery... 在 inventory_search() 中 - 在发出 ajax 请求之前，如何在发出新请求之前检查任何当前请求并 abort() 它们？或者...有更好的方法吗？

<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>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

创建一个包含所有请求的数组队列。然后，如果您发现需要中止所有现有请求的点，您可以遍历数组并在所有挂起的请求上调用 abort。应该很简单。

虽然另一种方法是只保留一个内部标志，指示请求当前是否在处理中，如果有请求则跳过该请求。或者处理你认为合适的方式。

编辑：检查此 SO 问题是否有类似情况：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();

或者只是在你的函数之外定义一个变量，它是一个指示是否正在发出请求的标志。您甚至可以使其更具体并存储搜索数据，仅跳过对相同数据有待处理请求的请求，并允许针对不同数据的其他请求。

希望这足以让您入门。

【讨论】：

【解决方案2】：

Spinon 的回答非常适合中止所有 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);
        }
    });
}

【讨论】：

+1 我使用完全相同的方法。（除了ajax_request var name ^^）...而且效果很好！
我刚刚将 var ajax_request; 更改为 var ajax_request = new XMLHttpRequest(); 并且它工作正常。为这个想法 +1。

【解决方案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) {}});

【讨论】：

【解决方案4】：

使用全局变量来保存当前请求的句柄。在这种情况下，在函数外部声明 var a 并将其设为全局。在调用 ajax 之前检查它不为空。如果它不为空abort，则使用新的 ajax 分配它。在成功/完成事件中，确保清除变量 a。可能不是最好的解决方案，但效果最好。

【讨论】：