js去抖（Debouncing）和节流（Throttling）

一时失言乱红尘 2021-06-24 16:09 432阅读 0赞

在开发过程中会遇到频率很高的事件或者连续的事件，如果不进行性能的优化，就可能会出现页面卡顿的现象，比如：

1.  鼠标事件：mousemove(拖曳)/mouseover(划过)/mouseWheel(滚屏)
2.  键盘事件：keypress(基于ajax的用户名唯一性校验)/keyup(文本输入检验、自动完成)/keydown(游戏中的射击)
3.  window的resize/scroll事件(DOM元素动态定位)

为了解决这类问题，常常使用的方法就是**throttle(节流)**和**debounce(去抖)**。throttle(节流)和debounce(去抖)都是用来**控制某个函数在一定时间内执行多少次的解决方案**，两者相似而又不同。

我们要知道一点，浏览器事件的callback会block浏览器自身的行为（例如上面提到的resize、scroll...）， 也就是比如一个scroll触发的callback要执行一秒，那么浏览器会等callback执行的一秒结束后，才会开始执行自己的scroll行为。这样的话如果每滑动一次就执行一次， 这个页面就废了。 所以要尽量保证callback能立即执行完（即使有更大的运算也要扔到另一个function作为callback）

早在2011年，Twitter 网站抛出了一个问题：向下滚动 Twitter 信息流的时候，变得很慢，很迟钝。John Resig 发表了[一篇博客][Link 1]解释这个问题，文中解释到直接给 scroll 事件关联昂贵的函数，是多么糟糕的主意。

John（5年前）建议的解决方案是，在 onScroll 事件外部，每 250ms 循环执行一次。简单的技巧，避免了影响用户体验。现如今，有一些稍微高端的方式处理事件。我来结合用例介绍下 Debounce，Throttle 和 requestAnimationFrame 吧。我首次看到 debounce 的 JavaScript 实现是在 2009 年的 [John Hann 的博文][John Hann]。不久后，Ben Alman 做了个[ jQuery 插件][jQuery]（不再维护），一年后 Jeremy Ashkenas 把它加入了 [underscore.js][]。而后加入了 Lodash 。

一、throttle和debounce区别：

throttle和debounce的作用就是确认事件执行的方式和时机，以前总是不太清楚两者的区别，容易把二者弄混。下面就通过两个简单的场景描述一下debounce和throttle，以后想到这两个场景就不会再弄混了：

debounce
    假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯； 
    如果在电梯门关闭之前，又有人来了，你会继续开门；
    这样一直进行下去，你可能需要等待几分钟，最终没人进电梯了，才会关闭电梯门，然后上楼。

所以debounce的作用是，**当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔**。

throttle
    假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯；  
    但是，你是个没耐心的人，你最多只会等待电梯停留一分钟；
    在这一分钟内，你会开门让别人进来，但是过了一分钟之后，你就会关门，让电梯上楼。

所以throttle的作用是，**预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期**。

二、简单实现：

1、首先来看看debounce的实现，根据前面对debounce的描述：

1.  debounce函数会通过闭包维护一个timer
2.  当同一action在delay的时间间隔内再次触发，则清理timer，然后重新设置timer

可以在Chrome中运行下面的代码，看看debounce的效果，[代码Github链接][Github]

2、throttle实现

throttle跟debounce的最大不同就是，throttle会有一个阀值，当到达阀值的时候action必定会执行一次。所以throttle的实现可以基于前面的debounce的实现，只需要加上一个阀值，[代码Github链接][Github]：

其实，对于上面的实现可以进心简化，只是通过闭包维护一个开始的时间：

通过前面的介绍，应该对debounce和throttle有一个直观的认识了：

*  debounce：把触发非常频繁的事件合并成一次执行
 *  throttle：设置一个阀值，在阀值内，把触发的事件合并成一次执行；当到达阀值，必定执行一次事件

了解了throttle和debounce之后，下面看看他们的常用场景：

debounce

*  对于键盘事件，当用户输入比较频繁的时候，可以通过debounce合并键盘事件处理
 *  对于ajax请求的情况，例如当页面下拉超过一定返回就通过ajax请求新的页面内容，这时候可以通过debounce合并ajax请求事件

throttle

*  对于键盘事件，当用户输入非常频繁，但是我们又必须要在一定时间内（阀值）内执行处理函数的时候，就可以使用throttle
    
    。例如，一些网页游戏的键盘事件
 *  对于鼠标移动和窗口滚动，鼠标的移动和窗口的滚动会带来大量的事件，但是在一段时间内又必须看到页面的效果。例如对于可以拖动的div，如果使用debounce，那么div会在拖动停止后一下子跳到目标位置；这时就需要使用throttle
 *  用户向下滚动无限滚动页面，需要检查滚动位置距底部多远，如果邻近底部了，我们可以发 AJAX 请求获取更多的数据插入到页面中。使用debounce 就不适用了，只有当用户停止滚动的时候它才会触发。实际用户滚动至邻近底部时，我们就想获取内容。所以，使用throttle 可以保证我们不断检查距离底部有多远。

三、示例：

1、向下无限滚动页面：

<!doctype html>
    <html>
    <head>
    <title>throttle测试</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
    <style type="text/css">
    body {
       background: #444444;
       color: white;
       font: 15px/1.51 system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
       margin:0 auto;
       max-width:600px;
       padding:20px;
    }
    .item {
      border:4px solid white;
      height:120px;
      width:100%;
      margin-bottom:50px;
      background:#333;
      padding:20px;
    }
    .color-1 { border-color: #9BFFBB}
    .color-2 { border-color: #B9C6FF}
    .color-3 { border-color: #FFA3D8}
    .color-4 { border-color: #FF8E9B}
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
      
      // Check every 200ms the scroll position
      $(document).on('scroll', _.throttle(function(){
        check_if_needs_more_content();
      }, 300));
    
      function check_if_needs_more_content() {     
        pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height();
        
      // console.log($(document).height());
      // console.log($(window).scrollTop());
      // console.log($(window).height());
      //console.log(pixelsFromWindowBottomToBottom);
        
        
        if (pixelsFromWindowBottomToBottom < 200){
          // Here it would go an ajax request
          $('body').append($('.item').clone()); 
        }
      }
    });
    </script>
    </head>
    <body>
    
    <h1>Infinite scrolling throttled</h1>
    <div class="item color-1">Block 1</div>
    <div class="item color-2">Block 2</div>
    <div class="item color-3">Block 3</div>
    <div class="item color-4">Block 4</div>
    </body>
    </html>

效果如下：

参考：

[https://www.cnblogs.com/wilber2013/p/5893426.html][https_www.cnblogs.com_wilber2013_p_5893426.html]

[Link 1]: http://ejohn.org/blog/learning-from-twitter
[John Hann]: http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
[jQuery]: http://benalman.com/projects/jquery-throttle-debounce-plugin/
[underscore.js]: https://github.com/jashkenas/underscore/commit/9e3e067f5025dbe5e93ed784f93b233882ca0ffe
[Github]: https://github.com/WilberTian/throttle-debounce
[https_www.cnblogs.com_wilber2013_p_5893426.html]: https://www.cnblogs.com/wilber2013/p/5893426.html