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