超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

根據(jù)輸入實(shí)時(shí)發(fā)送請(qǐng)求(防抖函數(shù))

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

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

有這樣一種常見(jiàn)的需求:有一個(gè)搜索框,需要根據(jù)用戶(hù)的輸入進(jìn)行實(shí)時(shí)的查詢(xún)。也就是說(shuō)用戶(hù)每輸入一個(gè)字符就要發(fā)送一次請(qǐng)求。

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

這樣做的不足也很明顯:

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

因?yàn)榘l(fā)送的是異步請(qǐng)求,有可能查詢(xún)的結(jié)果和最后輸入的內(nèi)容并不匹配。

如何解決以上兩種問(wèn)題呢? 有兩種解決方案

首先我們規(guī)定當(dāng)用戶(hù)停止輸入1秒(具體時(shí)間根據(jù)自己需求而定)后再根據(jù)輸入框的值發(fā)送請(qǐng)求。
其次我們利用定時(shí)器來(lái)解決以上問(wèn)題。
第一種方案:直接看代碼吧

vat timer
$('.input').on('keyup', function(e) {
    clearTimeout(timer)
    timer = setTimeout(function() {
      // do something
    }, 1000)
})

首先定義一個(gè)定時(shí)器timer
監(jiān)聽(tīng)輸入框的keyup事件,在回調(diào)函數(shù)里先清除timer,這一步總能保證在用戶(hù)停止輸入1秒后執(zhí)行最后一個(gè)timer。如果用戶(hù)輸入的間隔小于1秒就不會(huì)執(zhí)行timer
這么寫(xiě)似乎不太抽象,而且定義了一個(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ù)中寫(xiě)我們的處理邏輯就可以了。而且沒(méi)有了全局變量,避免了全局污染的可能??!

*第二種方案: *

var lastTime
$('.input').on('keyup', function(e) {
    lastTime = e.timeStamp
    setTimeout(function() {
        console.log('timeout')
        if (lastTime == e.timeStamp) {
            // do something
        }
    }, 1000)
})

首先定義一個(gè)時(shí)間戳來(lái)保存最后一次輸入的時(shí)間
然后1秒后在定時(shí)器里判斷保存的時(shí)間戳和觸發(fā)事件的時(shí)間戳e.timeStamp是否相同,只要1秒內(nèi)又輸入了內(nèi)容,e.timeStamp就回變化。
但是這種寫(xiě)法有個(gè)弊端,用戶(hù)鍵入幾次就會(huì)執(zhí)行幾次setTimeout,也就是說(shuō)當(dāng)用戶(hù)連續(xù)鍵入多個(gè)字符后,會(huì)有多個(gè)任務(wù)被推入待執(zhí)行隊(duì)列,然后每隔1秒執(zhí)行,只是在執(zhí)行的時(shí)候判斷要不要發(fā)送異步請(qǐng)求,這種方式不會(huì)發(fā)送多余的異步請(qǐng)求,但是會(huì)執(zhí)行多余的任務(wù),這無(wú)疑浪費(fèi)了性能。

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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔