<li id="g3zqm"></li>
2019-5-25 seo達人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
有這樣一種常見的需求：有一個搜索框，需要根據(jù)用戶的輸入進行實時的查詢。也就是說用戶每輸入一個字符就要發(fā)送一次請求。
想到的做法是監(jiān)聽輸入框的keyup時間然后在回調(diào)里發(fā)送異步請求。
這樣做的不足也很明顯：
其實我們并不需要用戶每次輸入時都發(fā)送請求，這樣會給服務器造成不必要的壓力。
因為發(fā)送的是異步請求，有可能查詢的結果和最后輸入的內(nèi)容并不匹配。
如何解決以上兩種問題呢？ 有兩種解決方案
首先我們規(guī)定當用戶停止輸入1秒（具體時間根據(jù)自己需求而定）后再根據(jù)輸入框的值發(fā)送請求。
其次我們利用定時器來解決以上問題。
第一種方案：直接看代碼吧
vat timer
$('.input').on('keyup', function(e) {
clearTimeout(timer)
timer = setTimeout(function() {
// do something
}, 1000)
})
首先定義一個定時器timer
監(jiān)聽輸入框的keyup事件，在回調(diào)函數(shù)里先清除timer，這一步總能保證在用戶停止輸入1秒后執(zhí)行最后一個timer。如果用戶輸入的間隔小于1秒就不會執(zhí)行timer
這么寫似乎不太抽象，而且定義了一個全局變量timer，不友好！稍加改動一下：
function debounce(func,delay){
var timer
return function(){
clearTimeout(timer)
var event = arguments[0] // 獲取原生event參數(shù)
timer = setTimeout(function(){
func(event)
},delay)
}
}
function handle(event){
// do something
}
$('.input').on('keyup', debounce(handle, 1000))
這樣是不是復用性更高，我們只需要在handle函數(shù)中寫我們的處理邏輯就可以了。而且沒有了全局變量，避免了全局污染的可能！！
*第二種方案： *
var lastTime
$('.input').on('keyup', function(e) {
lastTime = e.timeStamp
setTimeout(function() {
console.log('timeout')
if (lastTime == e.timeStamp) {
// do something
}
}, 1000)
})
首先定義一個時間戳來保存最后一次輸入的時間
然后1秒后在定時器里判斷保存的時間戳和觸發(fā)事件的時間戳e.timeStamp是否相同，只要1秒內(nèi)又輸入了內(nèi)容，e.timeStamp就回變化。
但是這種寫法有個弊端，用戶鍵入幾次就會執(zhí)行幾次setTimeout，也就是說當用戶連續(xù)鍵入多個字符后，會有多個任務被推入待執(zhí)行隊列，然后每隔1秒執(zhí)行，只是在執(zhí)行的時候判斷要不要發(fā)送異步請求，這種方式不會發(fā)送多余的異步請求，但是會執(zhí)行多余的任務，這無疑浪費了性能。
藍藍設計( m.hengshangtqd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。