Question

我正在尝试关注the advice within this 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();
        };
    });
});

我有两个问题：

此方法是否适用于我希望实现的目标
我得到一个“未捕获的TypeError：无法使用上面的代码调用方法'中止'未定义”错误。我哪里出错了。

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

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

2 个答案: