2021-07-15个人对防抖的理解！

个人对防抖的理解！

• 前言
• 一、防抖是什么？
• 二、防抖的实现
  • 1.定时器
  • 2.多个定时器访问同一变量(作用域链、闭包）
  • 3.this的指向
• 总结

---

前言

防抖和节流是前端经常会被提起以及涉及到的内容，更是前端性能优化的手段之一，我初学防抖和节流也遭遇了很多坑，所以想写一篇博客一则当作学习笔记，二则如果能帮助别人学习我就非常开心了！

---

一、防抖是什么？

个人觉得要想搞懂防抖不应该把注意力集中在防抖两个字上，而应该从生活中的例子出发去认识防抖。比如有一台电视机，规定某个频道正常播放为正常响应执行事件触发函数，规定更换频道为触发事件，假设现在频繁更换频道但电视机只会播放你最后一次更改成的频道，这其实就是防抖，还有例如电梯门，当有很多人进出的时候如果没有时间间隔的去开关门，就会面临着多次门的开关，这样对于电梯寿命的损害特别大，在这个事件中我们把电梯关门看作是一次正常的响应执行事件触发函数，进出的人对应着事件触发源，电梯门只会在最后一个人出去或者进入后才会关闭，这其实也是防抖。可以看出来关键词为最后一个，所以我所理解的防抖就是通过设置与合理清除定时器忽略掉多次事件在一定时间间隔触发源所触发的事件而只去响应最后一次的触发源的触发和执行相应的事件处理函数的现象。

二、防抖的实现

1.定时器：

 <button id="fd" type="button" onclick="FDfun(sayhello,4000)">防抖按钮</button>
    <script>
        let btn = document.querySelector("#fd")
        function sayhello(){//响应事件函数
            console.log("俺也一样")
        }
        function FDfun(fun,time,self){//防抖函数
            setTimeout(function() {
                fun()
            }, time);
             
        }
    </script>

首先我们肯定都能想到引入定时器去给检测事件的触发次数的感应有合理的检测时间，但是我们这样写 只能延缓事件的执行，并不能起到真真的防抖作用。

多次点击触发的执行结果

防抖的作用将多次点击忽略只响应最后有一次点击，这里我们可以想到清除定时，所以

<button id="fd" type="button" onclick="FDfun(sayhello,4000)">防抖按钮</button>
    <script>
        let btn = document.querySelector("#fd")
        function sayhello(){
            console.log("俺也一样")
        }
        function FDfun(fun,time,self){ 
            let tim
            if(tim){
                clearTimeout(tim)
            }
           tim=setTimeout(function() {
                fun()
            }, time);
            
        }
    </script>

 执行结果：

这里我们可以看出好像清除定时器并没有取得合理的结果，这是为什么了？

原因就在于多次事件的触发定义了多次接受定时器的tim变量，所以不通过的点击对应着不同的防抖定时器（即感应事件触发的时间长度）

 那怎么样让多个事件触发去对应同一个定时器变量了或者定时器了，在这里我们就可以想到作用域、作用域链和闭包

2.多个定时器访问同一变量(作用域链、闭包）

<button id="fd" type="button" onclick="FDfun(sayhello,4000)">防抖按钮</button>
    <script>
        let btn = document.querySelector("#fd")
        function sayhello(){
            console.log("俺也一样")
        }
        let tim
        function FDfun(fun,time){ 
                if(tim){
                clearTimeout(tim)
            }
             tim=setTimeout(function() {
                fun()
            }, time); 
            }
    </script>

多次点击执行结果

 我们可以看到事件只发生了一次！

---

 3.this的指向问题！

<button id="fd" type="button" onclick="FDfun(sayhello,4000)">防抖按钮</button>
    <script>
        let btn = document.querySelector("#fd")
        function sayhello(){
            console.log("俺也一样")
            console.log(this)
        }
        let tim
        function FDfun(fun,time){ 
                if(tim){
                clearTimeout(tim)
            }
             tim=setTimeout(function() {
                fun()
            }, time); 
            }
    </script>

执行结果：

 

 我们可以看到这里的this指向为window并不是button按钮，所以这里很不合理，我们需要改变this的指向。

用call方法改变this的指向：

 <button id="fd" type="button" onclick="FDfun(sayhello,4000)">防抖按钮</button>
    <script>
        let btn = document.querySelector("#fd")
        function sayhello(){
            console.log("俺也一样")
            console.log(this)
        }
        let tim
        function FDfun(fun,time){ 
                if(tim){
                clearTimeout(tim)
            }
             tim=setTimeout(function() {
                // fun()
                fun.call(this)
            }, time); 
            }
    </script>

执行结果：

我们可以看到结果以旧为window,这又是为什么了，原因就在于我能所绑定事件的方法是onclick() ,onclick绑定事件直接相当于在window中调用事件函数，所以其指向是window;

因此我们应该在绑定事件的时候应该把this作为参数传入

<button id="fd" type="button" onclick="FDfun(sayhello,4000,this)">防抖按钮</button>
    <script>
        let btn = document.querySelector("#fd")
        function sayhello(){
            console.log("俺也一样")
            console.log(this)
        }
        let tim
        function FDfun(fun,time,self){ 
                if(tim){
                clearTimeout(tim)
            }
             tim=setTimeout(function() {
                // fun()
                fun.call(self)
            }, time); 
            }
    </script>

执行结果：

三、总结

防抖是前端开发中所常用的提高性能的方式之一，防抖的实现涉及到了很多js中的关键知识，刚开始理解防抖不是很容易，所以在理解防抖之后就想写一篇文章来作为学习笔记，如果出现什么不对的地方欢迎大家的纠正，希望共同进步。