2019-5-25 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
有这样一种常见的需求：有一个搜索框，需要根据用户的输入进行实时的查询。也就是说用户每输入一个字符就要发送一次请求。
想到的做法是监听输入框的keyup时间然后在回调里发送异步请求。
这样做的不足也很明显：
其实我们并不需要用户每次输入时都发送请求，这样会给服务器造成不必要的压力。
因为发送的是异步请求，有可能查询的结果和最后输入的内容并不匹配。
如何解决以上两种问题呢？ 有两种解决方案
首先我们规定当用户停止输入1秒（具体时间根据自己需求而定）后再根据输入框的值发送请求。
其次我们利用定时器来解决以上问题。
第一种方案：直接看代码吧
vat timer
$('.input').on('keyup', function(e) {
clearTimeout(timer)
timer = setTimeout(function() {
// do something
}, 1000)
})
首先定义一个定时器timer
监听输入框的keyup事件，在回调函数里先清除timer，这一步总能保证在用户停止输入1秒后执行最后一个timer。如果用户输入的间隔小于1秒就不会执行timer
这么写似乎不太抽象，而且定义了一个全局变量timer，不友好！稍加改动一下：
function debounce(func,delay){
var timer
return function(){
clearTimeout(timer)
var event = arguments[0] // 获取原生event参数
timer = setTimeout(function(){
func(event)
},delay)
}
}
function handle(event){
// do something
}
$('.input').on('keyup', debounce(handle, 1000))
这样是不是复用性更高，我们只需要在handle函数中写我们的处理逻辑就可以了。而且没有了全局变量，避免了全局污染的可能！！
*第二种方案： *
var lastTime
$('.input').on('keyup', function(e) {
lastTime = e.timeStamp
setTimeout(function() {
console.log('timeout')
if (lastTime == e.timeStamp) {
// do something
}
}, 1000)
})
首先定义一个时间戳来保存最后一次输入的时间
然后1秒后在定时器里判断保存的时间戳和触发事件的时间戳e.timeStamp是否相同，只要1秒内又输入了内容，e.timeStamp就回变化。
但是这种写法有个弊端，用户键入几次就会执行几次setTimeout，也就是说当用户连续键入多个字符后，会有多个任务被推入待执行队列，然后每隔1秒执行，只是在执行的时候判断要不要发送异步请求，这种方式不会发送多余的异步请求，但是会执行多余的任务，这无疑浪费了性能。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。