84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
背景:实现网页的搜索框下拉提示,一般是监听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事件