? 根据输入实时发送请求(防抖函数) - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


根據輸入實時發送請求(防抖函數)

2019-5-25 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容,每天自動發到您的郵箱中,

有這樣一種常見的需求:有一個搜索框,需要根據用戶的輸入進行實時的查詢。也就是說用戶每輸入一個字符就要發送一次請求。

最先想到的做法是監聽輸入框的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秒執行,只是在執行的時候判斷要不要發送異步請求,這種方式不會發送多余的異步請求,但是會執行多余的任務,這無疑浪費了性能。

藍藍設計www.thriveonsite.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

標簽: 根據輸入實時發送請求(防抖函數) « 用一個實戰案例,告訴你如何處理復雜需求! | JQuery中的DOM操作(1)»


藍藍 http://www.thriveonsite.com

訂閱Rss
江西11选5 创世纪网赚是真的吗 2019还能做网赚吗 香港开奖结果2019开奖记录 2019最简单的网赚项目 网赚能赚到钱吗 2019年调查网赚 河北快3 2019免费网赚资源 金旋网赚