4

我正在查看 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()回调。有没有办法可以在发出第二个请求后取消第一个请求？

4

3 回答 3

2

你可以在发帖之前添加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;
                }
            });
        }
    });
});
于 2012-04-04T19:40:25.240 回答
1

将最终结果与请求一起缓存。然后，您可以确保每次都调用响应回调，并且 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);
                }
            });
        }
    });
 });
于 2012-11-01T23:14:14.110 回答
0

我会做：

if(xhr === lastXhr) {
    response(data);
} else {
    return false;
}
于 2019-07-05T10:36:04.607 回答