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

缓存搜索的建议列表：

1.定义全局缓存对象。

2.将用户输入的值作为键名

3.将数据作为值进行缓存

4.在keyup事件中获取搜索建议列表之前增加一个判断判断缓存中是否有用户键入的数据

完整代码如下：

<br>$(function () {<br>    //1.定义延时器的ID<br>    var timer = null<br> <br>    //定义缓存对象<br>    var objCache = {}<br>    //2.定义防抖的函数<br>    function debounceSearch(kw) {<br>        timer = setTimeout(function() {<br>            getSuggestList(kw)<br>        },500)<br>    }<br> <br>    //为输入框绑定keyup事件<br>    $('#ipt').on('keyup', function () {<br>        //3.触发键盘事件之后清空timer<br>        clearTimeout(timer)<br>       var keywords =  $(this).val().trim()<br>       if( keywords.length <= 0)  { return $('#suggest-list').empty().hide() }<br>       //console.log(keywords);<br> <br>       //判断缓存中是否有数据<br>       if(objCache[keywords]) {<br>           return renderSuggestList(objCache[k])<br>       }<br>        //获取搜索建议列表<br>        debounceSearch(keywords)<br>    })<br> <br>    //封装函数 发起JSONP请求<br>    function getSuggestList(kw) {<br>        $.ajax({<br>            url: 'https://suggest.taobao.com/sug?code=utf-8&q=' + kw,<br>            dataType: 'jsonp',<br>            success: function(res) {<br>                //console.log(res);<br>                renderSuggestList(res)<br>            }<br>        })<br>    }<br>    //渲染搜索建议列表<br>    function renderSuggestList(res) {<br>        if(res.result.length <= 0) {<br>            return ('#suggest-list').empty().hide()<br>        }<br>        var htmlStr = template('tpl-suggestList',res)<br>        $('#suggest-list').html(htmlStr).show()<br> <br>        //1.获取用户输入的内容，当做键<br>        var k = $('#ipt').val().trim()<br>        //2.将数据作为值进行缓存<br>        objCache[k] = res<br>    }<br>}) 

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