异步搜索事件处理 [英] Async search event handling

问题描述

我有一个基于Web的搜索输入。在每个onkeyup事件，异步请求时，从客户端用JavaScript，为返回搜索响应一个PHP文件 - 然后对JS取搜索响应，并将其写入到客户端。这部分工作正常。

不过，我的问题是，当用户键入搜索字词比系统速度可以响应。

假设一个用户 - 这类型的快 - 是做一个搜索单词超级。用户键入取值，而正在执行搜索和写<（和搜索为取值完成） code>取值用户输入 U ，现在对于苏搜索正在排队。然后，这个速度非常快的打字用户键入 P ，而取值是完成了，现在搜索的初始搜索为苏和 SUP 进行排队。

如果用户键入缓慢，就没有问题，我的搜索​​工具可以不必排队搜索请求到每个KEYUP响应。但是，如果用户键入速度非常快，他们会看到几个搜索结果刷新闪光灯在他们面前，他们完成键入他们的搜索词后，因为脚本是在队列中完成了项目。

我怎么能提高我的code，以改善用户体验？

例如，你会怎么脚本这使任何排队的项目，比国产被丢弃的最后一个其他的？

解决方案

您可以使用一个超时做到这一点（名为 去抖的）

  

的反跳是指凝聚几个时间上接近的信号转换成一个信号。的

  VAR定时器;
函数的keyup（）{
  clearTimeout（定时器）;
  定时器= setTimeout的（函数（）{
    搜索（THIS.VALUE）;
    定时器= NULL;
  }，计时器？ 50：1）;
}
 

这code意味着，如果用户键入太快（增量＆LT; 50ms的在这种情况下）的动作不会排队，但最新的总是覆盖previous那些

。

有一个办法（名为 节流的）

  

的节流是重复事件率的降低。的

  VAR定时器;
函数的keyup（）{
  如果（！定时器）
    定时器= setTimeout的（函数（）{
      搜索（THIS.VALUE）;
      定时器= NULL;
    }，100）;
  }
}
 

最后，你可以在一个时间来解决延迟问题获取更多的数据。结果
看到这个帖子，看的的Flickr 的是如何做的：的构建快速客户端搜索

另外，还要确保使用取决于如何频繁的数据更改某种缓存（APC /内存缓存）。这可以大大减少你的数据库上的压力。

I have a web-based search input. At each onkeyup event, an async request is made, from the client with JavaScript, to a PHP document that returns the search response - then the JS takes the search response and writes it to the client. This part works fine.

However, my issue is when a user types their search term faster than the system can respond.

Let's say a user - that types fast - is doing a search for the word super. The user types s (and a search is done for s), while the search is being performed and written for s the user types u, and now a search for su is queued up. Then, this very fast typing user types a p, while the initial search for s is finishing up, and now searches for su and sup are queued.

If a user types slowly, there is no issue and my search tool can respond to each keyup without having to queue up search requests. However, if a user types very fast, they will see several search result refreshes flash before them after they finish typing their search term because the script is finishing up items in the queue.

How could I improve my code to improve the user experience?

For example, how would you script this so that any queued items, other than the last one made are dropped?

解决方案

You can do this with a single timeout (called debouncing):

"Debouncing means to coalesce several temporally close signals into one signal."

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

This code means that if the user is typing too fast (delta <50ms in this case) the action won't queue up, but the newest always overwrites the previous ones.

There is another approach (called throttling):

"Throttling is the reduction in rate of a repeating event."

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

Finally you can fetch more data at a time to get around latency issues.
See this post to see how Flickr does it: Building Fast Client-side Searches

Also make sure to use some kind of caching (APC/memcache) depending on how frequently your data changes. This can greatly reduce stress on your database.

这篇关于异步搜索事件处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！