如果用户发送另一个请求，请使用 .abort(） 取消现有的 ajax 请求

Use .abort() to cancel existing ajax request if user sends another

本文关键字：请求 取消 ajax 请使用 用户 另一个 如果 abort      更新时间：2023-09-26

我试图遵循这个问题中的建议以适应以下情况：

在 keyup 上，向服务器发送 AJAX 请求，并在输入字段中使用该术语。但是，如果他们继续键入，请中止任何现有的 AJAX 请求，以便只发送一个请求。

这是我的代码：

jQuery(document).ready(function($) {
    var $input      = $('#s'),
        inputVal    = '',
        inputCount  = '';
    function process_asr_request() {
        $.ajax({
            url: MyAjax.ajaxurl,
            data: {
                'action':'pondera_asr_request',
                'inputVal' : inputVal
            },
            success:function(data) {
                $('#search-results').append( data )
            },
            error: function(errorThrown){
                console.log( errorThrown);
            }
        });
    }
    $input.on("keyup", function() {
        // record the value of the input
        inputVal    = $input.val(),
        // check the lenght on the value
        inputCount  = inputVal.length,      
        // define array for ajax requests
        requests    = [];
        // Only process once there are 3 characters
        if (inputCount > 2) {
            // push ajax requests into the array
            requests.push(
                process_asr_request(i)
            );
            // loop through the array of requests
            for(
                var i = 0;
                i < requests.length;
                i++
            )
            // kill any queued requests
            requests[i].abort();
        };
    });
});

我有两个问题：

  1. 这种方法对我想要实现的目标有效吗
  2. 我收到上面的代码"未捕获的类型错误：无法调用未定义的方法'中止'"错误。我哪里错了。

我对 AJAX 相当陌生，所以请原谅我的天真。

关闭，只需要返回 xhr 以便您可以中止它：

 function process_asr_request(inputVal) {
    return $.ajax({
        url: MyAjax.ajaxurl,
        data: {
            'action':'pondera_asr_request',
            'inputVal' : inputVal
        },
        success:function(data) {
            $('#search-results').append( data )
        },
        error: function(errorThrown){
            console.log( errorThrown);
        }
    });
}

此外，这个循环最好写成下面，所以旧的 xhr 从请求中删除：

var xhr;
while (xhr = requests.pop()) {
        // kill any queued requests
        xhr.abort();
}
requests.push(process_asr_request(inputVal));

另一个注意事项是，如果您希望它工作并且此函数中有多个全局变量，则请求应该在事件循环之外。

var requests = [];
$input.on("keyup", function() {
    var inputVal    = $input.val(),
    // check the lenght on the value
        inputCount  = inputVal.length;
    //...
});

var currXHR;
function process_asr_request() {
    if(currXHR && currXHR.abort) currXHR.abort();
    currXHR = $.ajax({
        url: MyAjax.ajaxurl,
        data: {
            'action':'pondera_asr_request',
            'inputVal' : inputVal
        },
        success:function(data) {
            $('#search-results').append( data )
        },
        error: function(errorThrown){
            console.log( errorThrown);
        }
    });
}
相关文章：