根據(jù)輸入實時發(fā)送請求（防抖函數(shù)）

2019-5-25    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

有這樣一種常見的需求：有一個搜索框，需要根據(jù)用戶的輸入進(jìn)行實時的查詢。也就是說用戶每輸入一個字符就要發(fā)送一次請求。

想到的做法是監(jiān)聽輸入框的keyup時間然后在回調(diào)里發(fā)送異步請求。

這樣做的不足也很明顯：

其實我們并不需要用戶每次輸入時都發(fā)送請求，這樣會給服務(wù)器造成不必要的壓力。

因為發(fā)送的是異步請求，有可能查詢的結(jié)果和最后輸入的內(nèi)容并不匹配。

如何解決以上兩種問題呢？ 有兩種解決方案

首先我們規(guī)定當(dāng)用戶停止輸入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))

這樣是不是復(fù)用性更高，我們只需要在handle函數(shù)中寫我們的處理邏輯就可以了。而且沒有了全局變量，避免了全局污染的可能?。?br />
*第二種方案： *

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，也就是說當(dāng)用戶連續(xù)鍵入多個字符后，會有多個任務(wù)被推入待執(zhí)行隊列，然后每隔1秒執(zhí)行，只是在執(zhí)行的時候判斷要不要發(fā)送異步請求，這種方式不會發(fā)送多余的異步請求，但是會執(zhí)行多余的任務(wù)，這無疑浪費了性能。

藍(lán)藍(lán)設(shè)計( yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

日歷

鏈接

個人資料

存檔