jquery - 多个自动完成调用 - jQuery

Question

我正在查看 jQuery UI 自动完成文档并查看他们的带有缓存的回调示例:

$(function() {
    var cache = {}, lastXhr;

    $('#Field').autocomplete({
        minLength: 2,
        delay: 600,
        source: function(request, response) {
            var term = request.term;

            if( term in cache ) {
                response(cache[term]);
                return;
            }

            lastXhr = $.post('LoadData', function(data, status, xhr) {
                cache[term] = data;

                if(xhr === lastXhr) {
                    response(data);
                }
            });
        }
    });
});

代码连接一个字段以使用自动完成功能，并存储已命中的查询的缓存。使用以下行，因此如果一个查询比另一个查询花费的时间更长，它不会替换自动完成值:

if(xhr === lastXhr) {
    response(data);
}

如果我开始输入几个字母，然后它会发送到服务器来查询数据，然后我暂停并再次开始输入，它将触发另一次发送到服务器的行程。 如果第一个查询在第二个查询之后完成，则加载图标永远不会消失。我认为这是因为它永远不会调用 response() 回调。有没有办法可以在发出第二个请求后取消第一个请求？

Answer 1

您可以在发帖之前添加 lastXhr.abort() 吗？每次您开始新请求时，这都会取消之前的请求。

$(function() {
    var cache = {}, lastXhr;

    $('#Field').autocomplete({
        minLength: 2,
        delay: 600,
        source: function(request, response) {
            var term = request.term;

            if( term in cache ) {
                response(cache[term]);
                return;
            }

            // Abort previous access if one is defined
            if (typeof lastXhr !== 'undefined' && lastXhr.hasOwnProperty("abort")) {
                lastXhr.abort();
            }

            lastXhr = $.post('LoadData', function(data, status, xhr) {
                cache[term] = data;

                if(xhr === lastXhr) {
                    response(data);
                    // Set to undefined, we are done:
                    // helps when deciding to abort
                    lastXhr = undefined;
                }
            });
        }
    });
});