一道前端面试题

Question

背景：实现网页的搜索框下拉提示，一般是监听keyup或者keydown事件，每输入一个字符都会发送ajax请求，因此极端情况是键盘的频繁输入就会发送很多请求。

问题：怎么优化使得等到用户输入完毕再发送请求以减少请求数？（附上实现代码，假如有个<input id="search" type="text">）

Answer 1

知识点：函数节流

也可以看下Underscore对函数节流的实现 调到5.7节，这里有两个需求分析的比较好！和你的问题吻合！

Answer 2

直接搜索 throttle or throttling

我寫過一個 jsfiddle jQuery $.throttle 例子
1000ms(1s之內), 無論點擊button多少次, 只會更新一次顏色.

用的就是這個插件here

Answer 3

记录两次触发keyup或keydown的时间间隔t，当t超过一定伐值，例如200ms，再发送请求，这样连续输入的时候不会发送请求

Answer 4

函数节流，或者。。。blur()

Answer 5

用事件稀释 设定一个计时器 每次触发keyup或者keydown的时候就让计时器重新计时 如果在设置的时间内没有事件发生就执行相应的程序

Answer 6

除了函数节流，也可以用xhr的abort()来结束ajax的上次请求，不知道符不符合T主的意思？

Answer 7

有两种方法，设定计时器 (setTimeout) 延时执行 AJAX 请求，或者计算 Keyup 次数，到达某次（比如 5）再执行 Ajax！

Answer 8

extjs对于combox联想显示触发的处理，采用delay的方法，延迟大概300-500毫秒，如果输入完毕后300-500毫秒依然有输入动作，后面的输入就取消掉前面delay的ajax请求，然后触发一个新的delay。输入速度的快慢不同，并不能后面的操作能够截住前面已经发出的请求。。。

实现：实现一个delay object，用一个变量记住，每次key事件时，都将这个object复位到延迟300毫秒即可，这样子如果前一次输入和后一次输入之间间隔不到300毫秒，后一次的操作就会将delay复位到300毫秒，自然前一次的delay操作就被取消掉了，重新开始倒计时了

Answer 9

检测input val的文本长度变化了再发请求，或者监听input事件