jQuery UI 自动完成：中止请求

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:

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

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

---

编辑：刚刚尝试输出$(this).data('xhr').readyState。它似乎永远不会小于4，这表明source 在最后一个请求返回响应之前不会再次被调用。真可惜，因为我们可以提前中止请求并加快响应时间...

Answer 1

bdparrish 有正确的想法

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

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

这样，您只会在怀疑用户完成输入后才发送请求。发出更少的 http 请求总比发出很多然后取消它们要好。

-莱德杰

Answer 2

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

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