节流（Throttle）与防抖（Debounce）区别与demo实现+ 图解

fulfilled

已于 2022-04-30 10:28:49 修改

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签：前端

于 2022-04-09 18:14:32 首次发布

本文链接：https://blog.csdn.net/weixin_46382886/article/details/124064008

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文探讨了节流和防抖两种常用的技术，通过时间戳和闭包实现事件处理的频率控制。节流确保在一定时间间隔内仅执行一次，而防抖则在用户停止操作后才执行。实例展示了如何在按钮点击事件中运用这两种技术来优化服务器负载。

摘要由CSDN通过智能技术生成

一、节流（Throttle）

无论节流还是防抖，我们都会在事件的处理函数中去统计时间判断，那函数内部有，每一次执行函数，都会对内部变量进行一个判断，这个变量在函数执行之后，不应该被销毁，所以这里用到闭包

场景：

页面有一个按钮，用户疯狂点点点，每点一次，都要触发一次处理函数，服务器承受不了
鼠标不断点击触发，mousedown（单位时间内只触发一次） mousemove事件

有两种主流的实现方式，一种是使用时间戳（好理解），一种是设置定时器（较麻烦）。

这里我使用时间戳实现节流函数每隔固定的时间处理函数

代码：

<body>
    <button>按钮</button>
    <script>
      //  时间戳实现节流函数：
      function throttle(fn, delay) {
        var previous = 0;
        // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
        return function () {
          var now = new Date(); //拿到当前的时间
          if (now - previous > delay) {
            // 每次触发事件的时候，都会拿到一个当前的时间
            //当前时间-调用函数最开始的时间  如果超过固定间隔时间
            fn(); //执行处理事件
            previous = now; //将当前触发事件的时间 赋值  成 当前事件首次触发的时间
          }
        };
      }
      document.querySelector("button").onclick = throttle(function () {
        console.log(1);
      }, 2000);
    </script>
  </body>

示意图：这里时间间隔我设置成了2s

二、防抖（Debounce）

场景：

1.search搜索框输入，只需用户最后一次输入完在发送请求。

2.表单的按钮提交事件，例如登录，发短信，避免用户点击太快，以至于发送了多次请求，加大服务器的压力

代码：

 <body>
    <button>按钮</button>
    <script>
      // 防抖方法: 使用闭包，操作同一个timer：只有最后一次操作生效
      // 触发时，创建定时器，当发现定时器存在就清除当前定时器，创建新的定时器

      //首次触发的时候  会创建一个setTimeout去等  此时如果再次触发 将timer清除
      function debounce(fn, delay) {
        var timer;
        return function () {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(function () {
            fn();
          }, delay);
        };
      }
      document.querySelector("button").onclick = debounce(function () {
        console.log(1);
      }, 2000);
    </script>
  </body>

示意图：这里的时间间隔设置成2s

说明：就是频繁点击时，会消除上一次的timer，创建自己的timer，等到最后一次点击时，比方说操作了8次，第七次timer被清除了，由于没有再触发Debounce防抖函数，就没有再创建timer，这个timer一直存在，等到时间间隔，就会去执行fn（）

<body>
        <span>0</span>
        <button>点击我+1</button>
        
    <script>
            var count = 0;
            let button  = document.querySelector('button')
            let span =  document.querySelector('span')
            // 手写节流
            button.onclick= debounce(function(){
                count++;
                span.innerHTML=count

            },1000)
            节流
            function throttle (fn,delay){
                 var previous = 0;
                 return function(){
                    var now = new Date();
                    if(now-previous>delay){
                        fn();
                        previous = now
                    }
                 }   
            }

            function debounce(fn,delay){
                var timer = null;
                return function(){
                    if(timer){
                        clearTimeout(timer)
                    }
                    timer=setTimeout(function(){
                        fn()
                    },delay)
                }
            }
         

    </script>




</body>