JavaScript 事件节流和事件防抖-白红宇

一个网站，想要吸引更多的流量，提高用户粘性，除了良好的设计和优雅的交互外，最重要的就是加载速度了。没有用户愿意等，哪怕是1秒，他们都可能不再来了。这个时候性能优化就显得十分重要了。

性能优化的方案中不得不提的是，列表中总结了很多值得大家注意的地方和解决方案，可供大家参考。当然雅虎军规并没有覆盖所有的性能优化方案，这里我们需要提一下性能优化中的事件优化---事件节流(throttle)与事件防抖(debounce)，这两点在实际应用的十分普遍

背景

假如我们为DOM绑定了onScroll事件，当使用触控板，滚动滚轮，或者拖拽滚动条的时候，一秒可以轻松触发几十次事件。更加夸张的是手机上的表现：慢慢滑动一下，一秒可以触发事件100次之多。这么高的执行频率，你的回调函数压力大可想而知，更加蛋疼的是：函数触发频率过高可能会导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。那这种就是非常差的体验。不要以为这个是小问题，当年，鼎鼎大名的Twitter网站就出现了这个问题：向下滚动 Twitter 信息流的时候，变得很慢，很迟钝。就是因为 scroll 事件关联了开销大的函数导致的。

加上了防抖和节流的函数变得特别有用,why？因为我们在事件和函数执行之间加了一个控制层，这个控制层控制的是函数是否执行，注意我们不能去控制 DOM 事件触发频率。

介绍完背景，我们来分别说一下事件节流和事件防抖

共同点：都限制函数的执行频次，达到优化的目的

不同点：

事件节流

处理方法是只允许一个函数在 x 毫秒内执行一次，跟防抖主要的不同在于，节流保证 x 毫秒内至少执行一次。举一个最近简单的?：每200ms检查下滚动位置，并触发页面加载

事件防抖

处理方法是把触发非常频繁的事件（比如key event ，resize）合并成一次执行

说了这么多，都是概念上的东西，估计大家烦了，马上进入大家喜欢的环节，荷枪实弹的来一发(你也可以自己造一个 debounce/throttle 的轮子或者随便找个博文复制过来。我这里是直接使用 lodash（还可以用underscore）。使用 lodash 自定义构建工具，生成一个仅包含 _.debounce 或 _.throttle 方法的压缩库，，可以使用以下的简单命令即可：

npm i -g lodash-clilodash-cli include=debounce,throttle复制代码

好了，先献上事件节流的?，供大家参看

    
        Title    这是一个事件节流的? 呵呵哒
    
     Block 1
    
    
     Block 2
    
    
     Block 3
    
    
     Block 4
    
复制代码

再来个事件防抖的，巩固一下：

    
        Title    这是一个事件防抖的? 呵呵哒
    
     normal resize events
     
    
    
     Debounced resize events
     
    
复制代码

说了这么多，事件节流和事件防抖真的用处很大如果记不住，你也可以比喻着想：

事件节流像是班车：固定在一段时间后执行，不会等乘客（事件），到点发车

事件防抖像是黑车：说是再等五分钟就走，但是如果又有人上车了（在5分钟内再次触发事件），那你又得等5分钟才能再出发（重新计时）

不恰当的?哈，帮助记忆

未经本人允许，不得转载，文章有疏漏浅薄之处，请各位大神斧正