根据输入实时发送请求（防抖函数）

有这样一种常见的需求：有一个搜索框，需要根据用户的输入进行实时的查询。也就是说用户每输入一个字符就要发送一次请求。

最先想到的做法是监听输入框的keyup时间然后在回调里发送异步请求。

这样做的不足也很明显：

1. 其实我们并不需要用户每次输入时都发送请求，这样会给服务器造成不必要的压力。

2. 因为发送的是异步请求，有可能查询的结果和最后输入的内容并不匹配。

如何解决以上两种问题呢？ 有两种解决方案

• 首先我们规定当用户停止输入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秒执行，只是在执行的时候判断要不要发送异步请求，这种方式不会发送多余的异步请求，但是会执行多余的任务，这无疑浪费了性能。

孰优孰劣 高下立判！