防抖和节流

一、防抖

1.什么是防抖

防抖策略是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
好处：当我们频繁地出发某个事件的时候，能保证不会频繁地执行回调，回调只执行一次，能提高浏览器的性能。

2.防抖的应用场景

输入框防抖
用户在输入框中连续输入一串字符时，可以通过防抖策略，只是输入完成后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。
例如，在输入框中输入你要查询的内容，每按下一个按键，都会触发一次请求，但只有最后一次的请求查询是有用的，所以怎么解决呢？用防抖解决！

3.实现输入框的防抖

   <script>
        // 1.定义延时器的id
        var timer=null
        // 2.定义防抖的函数
        function debounceSearch(kw){
            timer=setTimeout(function(){
                // 请求
                getList(kw)
            },500)
        }
        // 3.当用户触发keyup时清掉延时
        $('#input').on('keyup',function(){
            clearTimeout(timer)
            // ...省略
            debounceSearch(keywords)
        })
    </script>

二、节流

1.什么是节流

节流策略，可以减少一段时间内事件的触发频率
防止事件无限制的被触发，给它一个触发的间隔，在这个间隔时间内，你再触发这个事件，不会有任何的效果。

2.节流的应用场景

（1）鼠标连续不断地触发某事件(如点击)，只在单位时间内只触发一次；
（2）懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费CPU资源；
举例：鼠标在页面上滑动，实现一个小图标跟随的效果，如果不使用节流，则mousemove这个事件会被触发很多次，如何降低事件被触发的频率？要使用节流。

3.节流阀的概念

生活中的例子：高铁卫生间是否被占用，又红绿灯控制，红灯表示被占用，绿灯表示可使用。假设每个人上卫生间都要花费5分钟，则5分钟之内，被占用的卫生间无法被其他人使用。
上一个人使用完毕，需要将红灯重置为绿灯，表示下一个人可以使用卫生间；
下一个人在上卫生间之前，需要先判断控制灯是否为绿色，来知晓能否上卫生间。
程序中，节流阀是怎么工作的呢？
（1）节流阀为空，表示可以执行下一次操作；不为空，表示不能执行下一次操作。
（2）如果当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了！
（3）每次执行操作之前，必须先判断节流阀是否为空。

    // 1.预定一个timer节流阀
    var timer=null
    $(document).on('mousemove',function(e){
        // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足1s
        if(timer){
            return
        }
        timer=setTimeout(function(){
            $(ang).css('left',e.pageX+'px').css('top',e.pageY+'px')
            // 2.清空timer节流阀
            timer=null
        },1000)
    })

三、防抖和节流的区别

1.防抖

如果事件被频繁地触发，防抖能保证只有最后一次触发生效！前面N多次的触发都会被忽略。

2.节流

如果事件被频繁地触发，节流能够减少事件触发的频率！因此，节流是具有选择性地执行一部分事件。