异步搜索事件处理

我有一个基于网络的搜索输入。在每个 onkeyup 事件中，客户端都会使用 JavaScript 向返回搜索响应的 PHP 文档发出异步请求 - 然后 JS 获取搜索响应并将其写入客户端。这部分工作正常。

然而，我的问题是，当用户输入搜索词的速度比系统响应的速度快时。

假设一个打字速度很快的用户正在搜索这个词super。用户类型s（并且搜索完成了s），同时执行搜索并写入s用户类型u，现在搜索su正在排队。然后，这位打字速度非常快的用户键入了p，而最初的搜索s正在完成，现在正在搜索su and sup正在排队。

如果用户打字速度很慢，也没有问题，我的搜索工具可以响应每个按键，而无需对搜索请求进行排队。但是，如果用户输入速度非常快，则在输入完搜索词后，他们会看到几个搜索结果刷新在他们面前闪烁，因为脚本正在完成队列中的项目。

如何改进我的代码以改善用户体验？

例如，您将如何编写此脚本，以便删除除最后一项之外的任何排队项目？

您可以通过单个超时（称为去抖):

“去抖意味着将多个时间上接近的信号合并为一个信号。”

var timer;
function keyup() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    search(this.value);
    timer = null;
  }, timer ? 50 : 1);
}

此代码意味着，如果用户输入速度太快（在本例中增量

还有另一种方法（称为节流):

“限制是指降低重复事件的发生率。”

var timer;
function keyup() {
  if (!timer)
    timer = setTimeout(function() {
      search(this.value);
      timer = null;
    }, 100);
  }
}

最后，您可以一次获取更多数据来解决延迟问题。
请参阅这篇文章了解如何Flickr可以：构建快速的客户端搜索 http://code.flickr.com/blog/2009/03/18/building-fast-client-side-searches/

还要确保根据数据更改的频率使用某种缓存（APC/memcache）。这可以大大减轻数据库的压力。