Question

我正在使用执行ajax请求的source选项的回调版本。我想如果用户在ajax请求完成之前快速连续输入一堆字母，我们应该中止旧的并且只使用新的。我假设source参数的URL版本会自动执行此操作，但由于我使用的是自定义回调，因此我必须手动执行此操作。

所以这就是我所拥有的：

$('#myselector').autocomplete({
    source: function(request, response) {
        var data = {};
        if($(this).data('xhr')) {
            console.log('aborting...');
            $(this).data('xhr').abort();
        }
        // *snip* add some stuff to data
        $(this).data('xhr', $.ajax({
            url: '/ajax/major_city',
            dataType: 'json',
            data: data,
            success: function(data, textStatus, $xhr) {
                response(data);
            },
            complete: function($xhr, textStatus) {
                console.log(textStatus);
                if(textStatus === 'abort') {
                    console.log('aborted!');
                    response([]);
                }
            }
        }));
    },
// ....

因此，每当触发“源”回调时，它会检查该输入是否存在XHR元素（第一次未定义），如果是，则中止它（侧面问题：如何检查请求是否完整？没有意义尝试已经完成的中止请求。

但是the docs say：

提供自定义源回调以处理请求期间的错误非常重要。即使遇到错误，也必须始终调用响应回调。这可确保窗口小部件始终具有正确的状态。

因此，在我的代码底部，您将看到我（尝试）检查请求是否已中止，如果是，我返回一个空列表。但那“中止了！”似乎永远不会被称为日志。即使它被中止，它总是说“成功”。为什么？

修改：尝试输出$(this).data('xhr').readyState。它似乎永远不会小于4，它告诉我在最后一个请求返回响应之前不再调用source。这是一种耻辱，因为我们可以提前中止请求并稍微加快响应时间......

Answer 1

bdparrish有正确的想法

增加插件在发送请求之前等待的时间：

$( ".selector" ).autocomplete({ delay: 500 }); //default is 300

这样，只有在您怀疑用户输入完成后才会发送请求。减少http请求比制作许多请求更好并取消它们。

-Lededje

Answer 2

是否有理由不能设置等待用户“看起来”像他们完成输入的时间间隔？ 'delay'选项设置在搜索之前输入最后一个字母后等待的毫秒数。

此外，即使您从服务器返回'abort'，响应仍然会成功。因为请求没有在服务器上出错。你返回我假设的'abort'值。

jQuery UI自动完成：中止请求

2 个答案:

bdparrish有正确的想法