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

Question

我正在尝试遵循此问题中的建议以适应以下情况：

在 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. 上面的代码出现“Uncaught TypeError: Cannot call method 'abort' of undefined”错误。我哪里错了。

我对 AJAX 还很陌生，所以请原谅我的天真。

Answer 1

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);
        }
    });
}

Answer 2

关闭，只需要返回 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);
        }
    });
}

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

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;
    //...
});