防抖和节流讲解

1.防抖(debounce)

1.1 防抖讲解

防抖，就是防止抖动。官方定义就是用户在触发一次事件后，又在规定的时间内多次触发相同的事件，每次触发都会清除上次事件，也就是说只会触发最后一次事件。

但是在我看来，防抖用最通俗易懂的话来说，就是一个运送水泥的流水线车间，每次传送带都会将水泥送到最顶端，但是他不能掉下去到货舱里，只能通过在一定时间内传送带的下一次水泥传送过来，把它撞到货舱里面，直到传送带停止了，还会有一包水泥在最顶端。这袋水泥就好比我们最后触发的事件，传送带每次传送下一次水泥过来的时间就是我们设置的规定时间。如果他一直在规定时间内把水泥传送过来，那么始终顶部就只有一袋水泥。只有传送带停止传送之后，最后的那袋水泥，才是我们最后触发的那个事件！

1.2 实际项目应用场景

• 用户进行登录注册时，多次频繁点击，应用防抖让服务器只收到最后一次点击的请求。
• 我们在csdn写博客时，它会一段时间内自动跟你保存，如果你一直在编辑，它就不会触发，只会在你停止编辑几秒后自动保存，也运用到了防抖！
• 调整浏览器大小resize时，如果用户的resize频率很快，就只会调整最后一次用户调整的resize大小。

1.3代码实现

let btn = document.getElementById('btn'); //上面有一个点击按钮，获取这个按钮
        btn.addEventListener('click', debounce()) //用事件监听的形式绑定事件。第二个参数传入一个封装好的防抖函数debounce

        function debounce() { //封装防抖函数
            let timer; //定义一个变量timer
            return function () {
                clearTimeout(timer); //每次点击在定时器还没到时的时候会清除timer
                timer = setTimeout(() => { //设置定时器timer，在规定时间内点击会让timer清除。
                    console.log('我是防抖');
                }, 1000) //直到定时器到时，再没有点击事件，就是输出我是防抖
            }
        }

2.节流（throttle)

2.1节流讲解

节流，在我理解看来，就是节省流量。官方说法就是在一定时间内多次触发事件，它在该事件内只会触发一次，也就是说过了这段事件后又可以触发这一次，这就是节流。

举一个通俗的例子，就跟我们玩CF和吃鸡这种fps游戏一样，你玩射速很慢的枪，就算你鼠标点的再快，甚至于按着不动，那个枪的子弹也只能隔一段时间打出去几发。其实节流这个词的说法也就是在现实生活中引用过来的。江河为了限制船舶的流量，造成不必要的堵塞，也会有节流的做法。

2.2 节流实际项目应用场景

• 用户鼠标滚轮，隔一段时间才会计算位置信息，不会一滑到就会加载东西
• 商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。

2.3 代码实现

        let btn = document.getElementById('btn'); //上面有一个点击按钮，获取这个按钮
        btn.addEventListener('click', debounce()) //用事件监听的形式绑定事件。第二个参数传入一    
                                                  //个封装好的节流函数throttle

        function throttle() { //封装一个节流函数
            let flag = true; //先定义一个节流阀
            return function () {
                if (!flag) { //第一次点击过后再点击flag为false，就一直进入这个分支，达到一定时间                
                               //内只输出一次的效果;
                    return;
                }
                flag = false; //让flag为false
                setTimeout(() => { //定义一个定时器
                    console.log('我是节流');
                    flag = true //当定时器到时的时候,让flag重新为true
                }, 1000)
            }
        }