通过案例理解防抖与节流

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

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

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

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

        

代码说明：主要讲解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 = template('getTabKey1', res)
                $('#box-list').html(htmlStr).show()

                var k = $('#ipt').val().trim()
                cachObj[k] = res
            }
        })

 以上代码如果不定义防抖函数，则每次松开按键，时都会触发一下jsonp请求

这个时候就需要防抖函数，当你连续输入内容时，没有达到setTimeout预定的时间，就不会发起请求 。

 节流：单位时间内多次触发，只执行一次，从而减少事件的触发频率

案例效果图：天使会跟随鼠标移动 

 代码说明：在实现节流 *** 作之前，需要预先定义一个节流阀，就类似与水管通过水龙头控制水流的大小

     $(function() {
            //预定义一个节流阀
            var time = null
            $(document).on('mousemove', function(e) {
                if (time) return
                time = setTimeout(() => {
                    $('#imag').css('top', e.pageY + 'px').css('left', e.pageX + 'px')
                    console.log("ok");
                    time = null
                }, 24);

            })

        })

 上述代码如去除节流 *** 作，则移动触发函数时频率会很高，这里通过console.log(“ok”)大致描述一下

 

 

 案例源码（淘宝搜索检索）：

    
    
    
    
    
    
    
    
    



    
        
        

        
            
            
                宝贝
                店铺
            
            
            
                
                    搜索
                
            
            
        
    
    
    

css（源码） 

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.logo {
    width: 225px;
    height: 65px;
    margin: 50px 0;
}

.tabs {
    display: flex;
}

.tabs>div {
    width: 55px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
}

.tabs>div:hover {
    text-decoration: underline;
    color: #ff5700;
}

.tab-active {
    background-color: #ff5700;
    font-weight: bold;
    color: white;
}

.tabs>.tab-active:hover {
    color: white;
    text-decoration: none;
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box .ipt {
    box-sizing: border-box;
    width: 500px;
    height: 34px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    outline: none;
    border: 2px solid #ff5700;
}

.btnSearch {
    margin: 0;
    height: 34px;
    border: none;
    background-color: #ff5700;
    color: white;
    letter-spacing: 1em;
    text-align: center;
    width: 90px;
    padding-bottom: 5px;
    outline: none;
    cursor: pointer;
}

.btnSearch:hover {
    opacity: 0.9;
}

#box-list {
    border: 1px solid gray;
    display: none;
}

.suggest-item {
    line-height: 30px;
    padding-left: 10px;
}

.suggest-item:hover {
    cursor: pointer;
    background-color: #eee;
}

 

跟随的天使：