0

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

HTML

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

JS

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

（使用Zurb 的 textchange 插件）

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

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

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

Uncaught TypeError: Cannot call method 'abort' of undefined

我怎样才能.abort()在我的情况下工作？

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

4

1 回答 1

1

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

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

例如

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

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

于 2012-10-08T03:34:20.643 回答