js-函数节流和防抖

一.什么是函数防抖&节流

• 函数防抖

  函数防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

• 函数节流(throttle):

  当持续触发事件时，在规定时间段内只能调用一次回调函数。

  如果在规定时间内又触发了该事件，则什么也不做,也不会重新计时，即使一直触发，也是每隔n秒执行一次回调

• 相同点/不同点

  相同:都是限制回调函数调用频率，避免大量计算导致的页面卡顿.

  不同:防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行一次回调函数.

二.为什么需要函数防抖&节流

前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

在例如回调函数里面代码块比较沉重时，这样频繁触发，就会大大降低性能了

除此之外，短时间内重复的 ajax 调用不仅会造成数据关系的混乱，还会造成网络拥塞，增加服务器压力，显然这个问题也是需要解决的

三.函数的防抖

• 防抖的思路

  函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码

  既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

• 防抖代码实现

  function debounce(fn, delay) {
     // 创建一个标记用来存放定时器的返回值
     var timer = null;
     return function (e) {
         // 每当用户输入的时候把前一个 setTimeout clear 掉
         clearTimeout(timer);
         // 然后又创建一个新的 setTimeout,
         // 样就能保证interval 间隔内如果时间持续触发，
         // 就不会执行 fn 函数
         timer = setTimeout(() => {
           //这个this的修正是为了handle函数里面的this指向事件侦听对象，就是docment元素，
           //如果不修正handle函数中的this就指向window
           //还有这个arguments 是为了参数 e 穿到handle函数中
           fn.apply(this, arguments); 
         }, delay);
     };
  }
  
  // 处理函数
  function handle(e) {
    this.style.color="red";
   console.log(this);
   console.log('防抖：', Math.random());
  }
  
  var bn=document.querySelector("button");
  bn.addEventListener("click",debounce(handle, 500));
  

• 应用场景

  函数防抖一般用在什么情况之下呢？一般用在，连续的事件只需触发一次回调的场合。具体有：

  两个条件:

  • 如果客户连续的操作会导致频繁的事件回调(可能引起页面卡顿).
  • 客户只关心"最后一次"操作(也可以理解为停止连续操作后)所返回的结果.

  例如：

  1. 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
  2. 用户名、手机号、邮箱输入验证；
  3. 给按钮加函数防抖 防止表单多次提交
  4. 按钮点击:收藏,点赞,心标等

四.函数的节流

• 节流的思路

  第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。

  当第一次的定时器执行完函数最后会设定变量为flase。

  那么下次判断变量时则为flase，函数会依次运行

• 节流代码的实现

  function throttle(fn, delay = 100) {
             //首先设定一个变量，在没有执行我们的定时器时为null
             let timer = null;
             return function () {
                 //当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
                 if (timer) return;
                 timer = setTimeout(() => {
                     fn.apply(this, arguments);
                     timer = null;
                 }, delay);
             }
         }
  
  // 处理函数
  function handle(e) {
   console.log(this);
   console.log('节流：', Math.random());
  }
  
  var bn = document.querySelector("button");
  bn.addEventListener("click", throttle(handle, 500));
  

• 应用场景

  两个条件:

  • 客户连续频繁地触发事件
  • 客户不再只关心"最后一次"操作后的结果反馈.而是在操作过程中持续的反.

  例如：

  1.onscroll滚动时候的

  2.游戏中的刷新率
  3.DOM元素拖拽