使用 jQuery 中止待处理/积压的 AJAX 请求

Posted 2023-02-25

【中文标题】使用 jQuery 中止待处理/积压的 AJAX 请求

【英文标题】：Aborting pending / backlog of AJAX requests using jQuery

【发布时间】：2013-06-04 14:00:53

【问题描述】：

我有以下脚本：

  $(document).ready(function()
    $('#input').keyup(function()
        sendValue($(this).val());   

    ); 

);
function sendValue(str)
    $.post("ajax.php", sendValue: str ,
    function(data)
        $('#display').html(data.returnValue);
    , "json");

该脚本用于即时搜索类型场景（如 Google），因此当用户在文本框中输入时，它会向服务器发送相当多的选择请求（尽管我已经使用 pconnect，因此没有重复的数据库连接)。

这是一个相当大的数据库，每次击键都作为 AJAX 请求发送，因此最终会积压大量未决请求。我希望它在每次发送新请求时停止/取消所有先前的请求（如果它们没有被发回）。

我查看了xhr.abort()，但我很确定它只会停止任何尚未发送的请求（而不是告诉服务器停止处理）。这可能没问题，但我仍然不知道如何在我的代码中实现它。

【参考方案1】：

您可以使用与此类似的方法，以便将最后一个请求存储在某个非全局范围内：

function getSendValueFunction()
    var lastRequest;

    return function(str)
        if (lastRequest)
            lastRequest.abort(); // abort pending request
        
        // assign pending request, when created
        lastRequest = $.post("ajax.php", sendValue: str ,
        function(data)
            lastRequest = null; // clear pending request
            $('#display').html(data.returnValue);
        , "json");

    


var sendValue = getSendValueFunction();

请记住，getSendValueFunction 返回的函数对最后一个未决请求具有单独的寄存器。所以这将使他们有 2 个不同的待处理请求，完全分开：

var sendValue1 = getSendValueFunction();
var sendValue2 = getSendValueFunction();
sendValue1('aaa');
sendValue2('bbb');