13.4　截流 Ajax 请求

实现搜索功能时，越来越常见的一个功能是在用户输入过程动态地列出搜索结果来。通过给keyup事件绑定一个处理程序，我们也可以在jQuery API搜索中模拟这种实时的搜索功能，参见代码清单13-10。

代码清单13-10

$('#title').on('keyup', function(event) {
  $ajaxForm.triggerHandler('submit');
});

这样，只要用户在Search字段中输入内容，就会触发表单的submit处理程序。如果用户连续输入的速度很快，那么就会通过网络发送很多请求。结果可能会拖慢JavaScript的运行速度，拖慢网络连接，最后可能连服务器也处理不过来这种请求了。

通过缓存请求的结果，我们已经节省了一些请求了。不过，通过截流请求，还能够进一步减少服务器的负担。第10章在创建特殊的throttledScroll事件以减少触发原生sroll事件次数的时候，曾经涉及截流的概念。在这里，我们要考虑类似的减少活动次数的问题，这个活动就是keyup事件，参见代码清单13-11。

代码清单13-11

var searchTimeout,
    searchDelay = 300;
$('#title').on('keyup', function(event) {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(function() {
    $ajaxForm.triggerHandler('submit');
  }, searchDelay);
});

这里使用的技术（有时候了被称为“消除抖动”）与第10章使用的有点不一样。在第10章的例子中，我们需要scroll处理程序随着滚动的继续多次发挥作用。而在这里，我们希望keyup行为在输入完成后只发生一次。为此，我们在用户按下第一个键的时候设置一个JavaScript计时器，然后跟踪该计时器。随后的每一次击键动作都会重置该计时器，只有用户停止击键的时间超过预定的300毫秒后，才会触发submit处理程序并发送Ajax请求。