中止 $.post() / 响应式搜索结果答案

【问题标题】：Aborting $.post() / responsive search results中止 $.post() / 响应式搜索结果
【发布时间】：2012-10-08 03:19:10
【问题描述】：

我有以下杂乱无章的代码；

HTML

<input type="search" id="search_box" />
<div id="search_results"></div>

var search_timeout,
    search_xhr;
$("#search_box").bind("textchange", function(){
    clearTimeout(search_timeout); search_xhr.abort();
    search_term = $(this).val();
    search_results = $("#search_results");

    if(search_term == "") {
        if(search_results.is(":visible"))
            search_results.stop().hide("blind", 200);
    } else {
        if(search_results.is(":hidden"))
            search_results.stop().show("blind", 200);
    }

    search_timeout = setTimeout(function () {
        search_xhr = $.post("search.php", {
            q: search_term
        }, function(data){
            search_results.html(data);
        });
    }, 100);
});

（使用textchange plugin by Zurb）

我最初使用更简单的代码时遇到的问题是它非常无响应。结果会在几秒钟后出现，尤其是在键入速度较慢或使用 Backspace 等时。

我做了这一切，但情况也好不了多少。请求堆积如山。

我的初衷是使用.abort() 来取消之前仍在运行的任何请求，因为textchange 事件再次被触发（根据446594）。这不起作用，因为我在控制台中重复出现这样的错误；

Uncaught TypeError: Cannot call method 'abort' of undefined

如何让.abort() 在我的情况下工作？

此外，这种方法是获取“实时”搜索结果的最佳方式吗？很像 Facebook 的搜索栏，它会在用户输入时给出结果，而且看起来很快。

【问题讨论】：

您是第一次收到此错误吗？看起来你的 search_xhr 第一次是未定义的。
奇怪的是，我实际上每次击键都会收到两次此错误。
无论如何，search_xhr 应该是未定义的，所以你得到'Cannot call method 'abort' of undefined'

标签： javascript jquery ajax search xmlhttprequest

【解决方案1】：

您最好在发送请求之前稍作延迟。如果用户在最后一次的 100 毫秒（或您选择的其他时间）内按下另一个键，则无需首先发送请求。

当实际发送请求时，您应该检查一个是否已经处于活动状态。如果是，请取消它。

例如

if (search_xhr) {
   search_xhr.abort();
}

不要忘记在成功检索时重置该 var。例如删除 search_xhr;

【讨论】：