个人对于节流的理解！

文章目录

• 前言
• 一、节流是什么？
• 二、节流的实现
• 总结

---

前言

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

---

一、节流是什么？

同样在学习和理解节流时不能把所有注意力集中在词的表面意思，节流只是别人理解的定义名称。

节流的例子在生活中也会比较常见例如去买火车票(这里我们需要假设每位乘客的购票书时间均是相同的)，有多个乘客敲售票员的窗口，但售票员只会对第一个乘客进行售票处理，会忽略后面乘客的敲窗口的行为。这个例子就是一种节流现象。我所理解的节流就是通过定时器等设置在一定的时间范围内让事件处理函数只响应第一次事件源的触发而忽略后面相同的事件触发源

---

二、节流的实现

<button id="fd" type="button">节流按钮</button>
    <script>
        let btn = document.querySelector("#fd")
        function sayhello(){
            console.log("我是恩格拉拉里克")
        }
        function JLIU(func,time){
            let tim
            return function(){
                if(tim)
                {
                    return
                }
                tim=setTimeout(function(){
                    func()
                    tim = null
                }, time);
            }
        }
        btn.addEventListener('click',JLIU(sayhello,3000))
    </script>

节流函数执行效果：

 

可以看到在特定的时间长度内事件只响应了第一次，但在两倍的时间长度下事件会响应所规定时间的倍数次。

总结

节流是前端开发中所常用的提高性能的方式之一，节流的实现涉及到了很多js中的关键知识，理解完防抖理解节流的思想就会比较容易，如果文章出现什么不对的地方欢迎大家的纠正，希望共同进步！