直播电商平台开发，输入框的防抖

直播电商平台开发，输入框的防抖

缓存搜索的建议列表：

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: 'https://suggest.taobao.com/sug?code=utf-8&q=' + kw,
            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
    }
}) 

​

以上就是 直播电商平台开发，输入框的防抖，更多内容欢迎关注之后的文章