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

Answer 2

将最终结果与请求一起缓存。然后，您可以确保每次都调用响应回调，而lastData将确保使用正确的数据，无论查询是否不同步。

如：

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

    $('#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);
                    // Store the latest data
                    lastData = data;

                }
                else
                {
                    // Queries have come back out of sync - this isn't the last one
                    // but we need to call response to stop the spinner
                    response(lastData);
                }
            });
        }
    });
 });

Answer 3

我只会做：

if(xhr === lastXhr) {
    response(data);
} else {
    return false;
}

多个自动完成调用 - jQuery

3 个答案: