前端性能优化之防抖与节流，大幅度降低你的事件处理性能

我是导航栏

我是内容1

我是内容2

我是内容3

我是内容4

我是内容5

我是内容6

我是内容7

我是内容8

我是内容9

效果展示

我们可以看到， scroll事件是一个频发事件，我们只是简单的往下滚动， 但scroll 事件却触发了很多很多很多次。 但是我们的目的可能只是想获得滚动停下来以后导航栏距离文档顶部的距离， 我们并不需要滚动停止前那过程中变化的距离， 如果一直在滚动时去获取距离，这非常影响性能，这是我们就需要用到 防抖和节流了。

二、防抖

---

（1）定义

抖，听起来就是一个频繁触发的动作，我们可以想象我们在跑步，每跑一步就出很多的汗，我们跑的过程中，很想拿毛巾擦一擦汗，但是一想，如果刚擦完汗，跑几步就又出汗了，还不如不擦，我看看我等会还跑不跑，如果还跑，那我就一直不擦汗，如果我什么时候不跑了，我就开始擦一下汗。那么‘ 跑步 ’ 这个动作就可以看作我们上述代码中的滚动事件， ’ 擦汗 ’ 就可以看成scroll 事件的处理代码，即获取导航栏离文档顶部的距离。 那么防抖，就是我们滚动页面，刚要获取导航栏离文档顶部的距离，但是发现等会还要继续滚动，那么就先不获取了，等什么时候停止滚动了，再获取这个距离。

以上文字就是对防抖这个概念的一个形象的解释，希望大家反复阅读，理解了定义以后才方便理解下面的实现防抖的代码。

（2）使用

为了解决我们正文刚开始那个例子中，频繁获取导航栏离文档顶部的距离的现象，我们可以用一个set