背景:实现网页的搜索框下拉提示,一般是监听keyup或者keydown事件,每输入一个字符都会发送ajax请求,因此极端情况是键盘的频繁输入就会发送很多请求。
问题:怎么优化使得等到用户输入完毕再发送请求以减少请求数?(附上实现代码,假如有个<input id="search" type="text">)
<input id="search" type="text">
光阴似箭催人老,日月如移越少年。
知识点:函数节流
也可以看下Underscore对函数节流的实现 调到5.7节,这里有两个需求分析的比较好!和你的问题吻合!
直接搜索 throttle or throttling
我寫過一個 jsfiddle jQuery $.throttle 例子 1000ms(1s之內), 無論點擊button多少次, 只會更新一次顏色.
用的就是這個插件here
记录两次触发keyup或keydown的时间间隔t,当t超过一定伐值,例如200ms,再发送请求,这样连续输入的时候不会发送请求
函数节流,或者。。。blur()
blur()
用事件稀释 设定一个计时器 每次触发keyup或者keydown的时候就让计时器重新计时 如果在设置的时间内没有事件发生就执行相应的程序
除了函数节流,也可以用xhr的abort()来结束ajax的上次请求,不知道符不符合T主的意思?
有两种方法,设定计时器 (setTimeout) 延时执行 AJAX 请求,或者计算 Keyup 次数,到达某次(比如 5)再执行 Ajax!
extjs对于combox联想显示触发的处理,采用delay的方法,延迟大概300-500毫秒,如果输入完毕后300-500毫秒依然有输入动作,后面的输入就取消掉前面delay的ajax请求,然后触发一个新的delay。输入速度的快慢不同,并不能后面的操作能够截住前面已经发出的请求。。。
实现:实现一个delay object,用一个变量记住,每次key事件时,都将这个object复位到延迟300毫秒即可,这样子如果前一次输入和后一次输入之间间隔不到300毫秒,后一次的操作就会将delay复位到300毫秒,自然前一次的delay操作就被取消掉了,重新开始倒计时了
检测input val的文本长度变化了再发请求,或者监听input事件
知识点:函数节流
也可以看下Underscore对函数节流的实现 调到5.7节,这里有两个需求分析的比较好!和你的问题吻合!
直接搜索 throttle or throttling
我寫過一個 jsfiddle jQuery $.throttle 例子
1000ms(1s之內), 無論點擊button多少次, 只會更新一次顏色.
用的就是這個插件here
记录两次触发keyup或keydown的时间间隔t,当t超过一定伐值,例如200ms,再发送请求,这样连续输入的时候不会发送请求
函数节流,或者。。。
blur()
用事件稀释 设定一个计时器 每次触发keyup或者keydown的时候就让计时器重新计时 如果在设置的时间内没有事件发生就执行相应的程序
除了函数节流,也可以用xhr的abort()来结束ajax的上次请求,不知道符不符合T主的意思?
有两种方法,设定计时器 (setTimeout) 延时执行 AJAX 请求,或者计算 Keyup 次数,到达某次(比如 5)再执行 Ajax!
extjs对于combox联想显示触发的处理,采用delay的方法,延迟大概300-500毫秒,如果输入完毕后300-500毫秒依然有输入动作,后面的输入就取消掉前面delay的ajax请求,然后触发一个新的delay。输入速度的快慢不同,并不能后面的操作能够截住前面已经发出的请求。。。
实现:实现一个delay object,用一个变量记住,每次key事件时,都将这个object复位到延迟300毫秒即可,这样子如果前一次输入和后一次输入之间间隔不到300毫秒,后一次的操作就会将delay复位到300毫秒,自然前一次的delay操作就被取消掉了,重新开始倒计时了
检测input val的文本长度变化了再发请求,或者监听input事件