直播電商平臺開發，輸入框的防抖

直播電商平臺開發，輸入框的防抖

快取搜尋的建議列表：

1.定義全域性快取物件。

2.將使用者輸入的值作為鍵名

3.將資料作為值進行快取

4.在keyup事件中獲取搜尋建議列表之前增加一個判斷  判斷快取中是否有使用者鍵入的資料

完整程式碼如下：

$(function () {
    //1.定義延時器的ID
    var timer = null
 
    //定義快取物件
    var objCache = {}
    //2.定義防抖的函式
    function debounceSearch(kw) {
        timer = setTimeout(function() {
            getSuggestList(kw)
        },500)
    }
 
    //為輸入框繫結keyup事件
    $('#ipt').on('keyup', function () {
        //3.觸發鍵盤事件之後清空timer
        clearTimeout(timer)
       var keywords =  $(this).val().trim()
       if( keywords.length <= 0)  { return $('#suggest-list').empty().hide() }
       //console.log(keywords);
 
       //判斷快取中是否有資料
       if(objCache[keywords]) {
           return renderSuggestList(objCache[k])
       }
        //獲取搜尋建議列表
        debounceSearch(keywords)
    })
 
    //封裝函式 發起JSONP請求
    function getSuggestList(kw) {
        $.ajax({
            url: '
            dataType: 'jsonp',
            success: function(res) {
                //console.log(res);
                renderSuggestList(res)
            }
        })
    }
    //渲染搜尋建議列表
    function renderSuggestList(res) {
        if(res.result.length <= 0) {
            return ('#suggest-list').empty().hide()
        }
        var htmlStr = template('tpl-suggestList',res)
        $('#suggest-list').html(htmlStr).show()
 
        //1.獲取使用者輸入的內容，當做鍵
        var k = $('#ipt').val().trim()
        //2.將資料作為值進行快取
        objCache[k] = res
    }
})

以上就是 直播電商平臺開發，輸入框的防抖，更多內容歡迎關注之後的文章