您如何解决实时搜索的“滞后”问题？答案

【问题标题】：How do you solve the "lag" problem of a live search?您如何解决实时搜索的“滞后”问题？
【发布时间】：2011-01-18 19:38:51
【问题描述】：

您好，我正在我的 web 应用程序中实现实时搜索（=您键入时搜索）功能。目前我正在使用 keyup 事件通过 ajax post 发送搜索请求，例如

$('#SearchField').keyup(function(e) {
        $.post(
           ...
        );
});

但这会导致某种滞后问题，在某些情况下，当我搜索时，例如在“问题”之后，“专业”的响应显示在“问题”响应之后，并用覆盖正确的搜索结果取得重大成果的方法。

什么是打击这种行为的好方法？

tia

【问题讨论】：

为什么不每隔 0.5 - 1.0 秒轮询一次文本框的变化？

标签： jquery search

【解决方案1】：

$('#SearchField').keyup(function(e) {
  t = setTimeout(function(){        
    $.post(
           ...
    );
  },1000);
});

使用此代码，您的函数将在 1000 毫秒后执行。如果 keyup 再次被触发，它将覆盖变量，并有效地取消第一个函数。换句话说，直到用户停止输入 1 秒后，整个帖子才会发生。

【讨论】：

【解决方案2】：

我已经实现了一次“实时搜索”，并使用超时仅在 no 输入一段时间（半秒左右）后才开始搜索。这样，只有在用户停止输入时才会触发搜索，从而减少延迟结果和服务器负载。

在您的情况下，我会检查用户是否继续输入并且不会提交搜索或显示任何迟到的“旧”结果。

【讨论】：

【解决方案3】：

您可以中止之前的请求

var xhr = null;
$('#SearchField').keyup(function(e) {
  if (xhr !== null) xhr.abort ();
  xhr = $.post(
    ...
  );
});

或为每个请求设置分配 ID。当请求完成时，如果更大的 id 已经返回，则忽略答案。否则，存储 id。

【讨论】：

【解决方案4】：

大多数自动完成不会替换用户输入的内容 - 它们会在下拉列表中显示可能的选项，然后用户可以选择。

这是一个已经编写得很好的自动完成的精彩示例：http://view.jquery.com/trunk/plugins/autocomplete/demo/

【讨论】：

【解决方案5】：

正如您所发现的，创建出色的实时搜索体验涉及许多棘手的 UI（用户界面）或 UX（用户体验）问题。

我将 UI/UX 测试的繁重工作留给了 Yahoo 的开发人员，他们开发了他们在 Web 属性上使用的自动完整控件。更好的消息是他们已经将它作为开源发布：http://developer.yahoo.com/yui/autocomplete/

不太好的消息是它不使用 JQuery，而您却使用了。您可以查看他们的源代码，了解他们如何处理多个计时问题等。请注意，他们在按键按下而不是按键启动时启动计时器。

还有一篇关于 Flickr 如何使用 Yaho 自动完成功能实现页内搜索的好文章：http://code.flickr.com/blog/2009/03/18/building-fast-client-side-searches/

【讨论】：

【解决方案6】：

诀窍是使用中止和 ajax 队列，我为我创建的实时搜索编写了一个自定义库，过滤了 2000 万条记录，如黄油（授予优化的 eav 表有助于提高查询速度）。还有一个 jquery ajax manager 插件可以很好地工作（我需要一些更复杂的东西，所以我自己写了）。您可以设置队列号，在新呼叫时中止等。这样在最终用户输入之前不会请求任何内容

【讨论】：