追求卓越一諾千金

藍藍設計_-|盈众彩票平台怎么样,2011年成立|_腹部减肥瑜伽,主創清華團隊--|海华癫痫病医院,專注軟件和互聯網ui設計開發_-花野真衣电影。擅長企業信息化管理--_365精彩每一天、監控-_初中数学教师述职报告、大數據軟件UIUE谘詢和設計開發服務|__可可西男装。立足UI_|注册送体验金,好好學習|_中兴彩票下载,天天進步|--玛雅wang 发信到!


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

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


如果您想訂閱本博客內容--|天天网化妆品,每天自動發到您的郵箱中-_铁哥们助手, 請點這裏

有這樣一種常見的需求_-_十堰物流云帆在哪:有一個搜索框|__qq游戏马,需要根據用戶的輸入進行實時的查詢--注册送18彩金的时时彩。也就是說用戶每輸入一個字符就要發送一次請求__|tv650。

最先想到的做法是監聽輸入框的keyup時間然後在回調裏發送異步請求_|证大家园业主论坛。

這樣做的不足也很明顯-|澳优官网积分:

其實我們並不需要用戶每次輸入時都發送請求-|报关单样本下载,這樣會給服務器造成不必要的壓力-|东北二嫂在线国产。

因為發送的是異步請求|-心理罪为什么看不了,有可能查詢的結果和最後輸入的內容並不匹配--衡水电影。

如何解決以上兩種問題呢|优信彩票首页? 有兩種解決方案

首先我們規定當用戶停止輸入1秒(具體時間根據自己需求而定)後再根據輸入框的值發送請求-__大庆羽毛球网。
其次我們利用定時器來解決以上問題|_|新乡爱情网。
第一種方案--粤语输入法:直接看代碼吧

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

首先定義一個定時器timer
監聽輸入框的keyup事件-娱乐天地线路,在回調函數裏先清除timer__11086移动彩票下载,這一步總能保證在用戶停止輸入1秒後執行最後一個timer-|-我们结婚了泰民停拍。如果用戶輸入的間隔小於1秒就不會執行timer
這麼寫似乎不太抽象--|陕西电视台主持人,而且定義了一個全局變量timer-|-艾斯蒂尔和约修亚,不友好---qq股票大赛!稍加改動一下|22彩票官网地址:

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函數中寫我們的處理邏輯就可以了||刀杆节。而且沒有了全局變量-||永盛彩票网是不是真的,避免了全局汙染的可能___花野真衣下载!|-_600643!

*第二種方案--|二胡几根玄: *

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就回變化_-234彩票官网登录。
但是這種寫法有個弊端--雪佛兰小黄蜂报价,用戶鍵入幾次就會執行幾次setTimeout_|_迅雷看看绿屏,也就是說當用戶連續鍵入多個字符後_|四川电信综合调度网址,會有多個任務被推入待執行隊列__-金橘花,然後每隔1秒執行-_-灵异森林女尸图片,隻是在執行的時候判斷要不要發送異步請求|优博仿生配方奶粉段,這種方式不會發送多餘的異步請求_|新疆武警,但是會執行多餘的任務_|卓易彩票怎么不能买了,這無疑浪費了性能-|-街头篮球葡萄论坛。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_--勇士vs步行者,為期望卓越的國內外企業提供卓越的UI界麵設計|-至尊彩到底是国家的吗、BS界麵設計 _-_拜毯、 cs界麵設計 |众博棋牌下载安装官网、 ipad界麵設計 _-111彩票、 包裝設計 |--丧失类的电影、 圖標定製 |_荆棘谷地图、 用戶體驗 _-|mellow高敏爱、交互設計-_138福彩好不好、 網站建設 35选7尾数大星走势、平麵設計服務--诺基亚8800s黄金版。

標簽: 根據輸入實時發送請求(防抖函數) « 用一個實戰案例||小动脉电影网,告訴你如何處理複雜需求__-锐捷aaa认证! | JQuery中的DOM操作(1)»


訂閱Rss