输入框的防抖

1.什么是防抖

防抖策略是当事件被触发后，延迟n秒再执行回调，如果在这n秒内事件又被触发，则重新计时。

好处就是在事件被频繁触发的情况下，保证事件只会被执行一次，不会频繁执行。

2.防抖的应用场景：

用户在输入框中连续输入一段字符时，可以通过防抖策略，只在输入完成后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。

思路：写一个函数，内部包含一个定时器，它在一段时间后发起请求，比如说500ms，然后在这个时间段内，只要再次监听到触发了发起请求的事件，就清空这个函数内的定时器。

如下的例子：

$(function () {
    //1.定义延时器的ID
    var timer = null
    //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);
        //获取搜索建议列表
        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()
    }
})

在假如搜索了apple 发起了请求 再添加上一部分内容比如 mac ，删除mac后，上述代码还会继续发起请求apple的请求，所以 有了如下的解决方案：

缓存搜索的建议列表：

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
    }
})