通过案例理解防抖与节流

说明：案例是通过jQuery来操作Dom元素的，其中防抖案例（使用到了jQuery中的ajax发起jsonp请求与art-template模板渲染，后续会持续更新）：淘宝搜索检索，节流案例：跟随的天使案例；通过案例可以让你清晰直观的理解防抖与节流操作。

防抖：延迟n秒执行回调，若在n秒内被触发则重新计时，只执行最后一次操作

经典案例：淘宝搜索栏检索案例

1. 预览效果图：通过关键字搜索会检索出相近的词组关键字

        

代码说明：主要讲解js代码如何实现防抖操作，下文提供源码

         $(function() {
                //定义防抖函数
            var timere = null
                //定义数据缓存对象
            var cachObj = {}
                //定义防抖函数
            function getTableTime(key) {
                timere = setTimeout(function() {
                    getTabKey(key)
                }, 500)
            }
           
            $('#ipt').on('keyup', function() {
                    clearTimeout(timere)
                    var keyds = $(this).val().trim()
                    if (keyds.length <= 0) return $('#box-list').empty().hide()
                        // console.log(keyds);
                    if (cachObj[keyds]) return renderTem(cachObj[keyds])
                    getTableTime(keyds)
                })
                //发起ajax请求
            function getTabKey(key) {
                $.ajax({
                    url: 'https://suggest.taobao.com/sug?q=' + key,
                    dataType: 'jsonp',
                    success: function(res) {
                        // console.log(res);
                        renderTem(res)
                    }
                })
            }
            //渲染UI结构
            function renderTem(res) {
                if (res.result.length <= 0) return $('#box-list').empty().hide()
                var htmlStr = tem