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秒執行，只是在執行的時候判斷要不要發送異步請求，這種方式不會發送多余的異步請求，但是會執行多余的任務，這無疑浪費了性能。
藍藍設計( m.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。