js防抖与节流以及应用场景

╰半橙微兮° 2023-07-17 11:15 21阅读 0赞

在前端开发中会遇到一些频繁的事件触发，例如input，keyup，keydown，scroll，resize，mousemove等，这非常影响性能，所以我们需要控制它们触发的频率，方法就是防抖与节流。

*  防抖
    
    防抖的原理就是：要等你触发完事件 n 秒内不再触发事件，我才执行。

//debounce
      function debounce(func, wait) { 
          var timeout;
          return function () { 
              var context = this;
              var args = arguments;
              clearTimeout(timeout)
              timeout = setTimeout(function () { 
                  func.apply(context, args)
              }, wait);
          }
      }

*  **节流**
    
    节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。  
    有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。
 *  时间戳实现
    
    特点：第一次事件会立刻执行，停止触发后没有办法再执行事件

// 如果直接使用underscore.js
    // _.throttle(func,2000,{leading:true；training:false;})
    // 第一次触发: leading:true; 
    // 最后一次触发： training:true;
    // 没有都为false的情况
      function throttle(func, wait) { 
          var previous = 0;
          return function () { 
              var now = Date.now();
              var context = this;
              var args = arguments;
              if (now - previous > wait) { 
                  func.apply(context, args);
                  previous = now;
              }
          }
      }

*  定时器实现
    
    特点：会在 n 秒后第一次执行，事件停止触发后依然会再执行一次事件

# 应用场景： #

**防抖：**

*  1.浏览器窗口 缩放，resize事件，常见于需要做页面适配的时候，需要 根据最终呈现的页面情况进行dom渲染
 *  2.表单的按钮提交事件，例如登录，发短信，避免用户点击太快，以至于发送了多次请求
 *  3.search搜索框输入，只需用户最后一次输入完在发送请求
 *  4.文本编辑器实时保存，当无任何更改操作1s后进行保存

**节流：**

*  1.鼠标不断点击触发，mousedown（单位时间内只触发一次） mousemove事件
 *  2.商品预览图的放大镜效果
 *  3.谷歌搜索框（支持实时搜索），搜索联想功能
 *  4.scroll事件，每隔1s计算一次位置信息