在js中的Debounce 和 Throttle 的原理及实现

àì夳堔傛蜴生んèń 2022-01-23 23:35 223阅读 0赞

一、Debounce 和 Throttle 的原理

1.  throttle和debounce均是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，throttle并没有实质上减少事件的触发次数，两者在概念理解上确实比较容易令人混淆
2.  debounce 强制函数在某段时间内只执行一次，throttle 强制函数以固定的速率执行，在处理一些高频率触发的 DOM 事件的时候，它们都能极大提高用户体验
3.  在处理诸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等事件的时候，通常我们不希望这些事件太过频繁地触发，尤其是监听程序中涉及到大量的计算或者有非常耗费资源的操作
4.  两者应用之后，直接带来的效率，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]

二、Debounce

1.  debounce 函数所做的事情就是，强制一个函数在某个连续时间段内只执行一次，哪怕它本来会被调用多次。我们希望在用户停止某个操作一段时间之后才执行相应的监听函数，而不是在用户操作的过程当中，浏览器触发多少次事件，就执行多少次监听函数
2.  代码如下：

function debounce(fn, delay) { 
    
      // 定时器，用来 setTimeout
      var timer
    
      // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
      return function () { 
    
        // 保存函数调用时的上下文和参数，传递给 fn
        var context = this
        var args = arguments
    
        // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
        clearTimeout(timer)
    
        // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
        // 再过 delay 毫秒就执行 fn
        timer = setTimeout(function () { 
          fn.apply(context, args)
        }, delay)
      }
    }

1.  说明理解：  
    debounce 返回了一个闭包，这个闭包依然会被连续频繁地调用，但是在闭包内部，却限制了原始函数 fn 的执行，强制 fn 只在连续操作停止后只执行一次

三、Throttle

1.  throttle 的概念理解起来更容易，就是固定函数执行的速率，即所谓的“节流”
2.  代码如下：

/** * * @param fn {Function} 实际要执行的函数 * @param delay {Number} 执行间隔，单位是毫秒（ms） * * @return {Function} 返回一个“节流”函数 */
    
    function throttle(fn, threshhold) { 
    
      // 记录上次执行的时间
      var last
    
      // 定时器
      var timer
    
      // 默认间隔为 250ms
      threshhold || (threshhold = 250)
    
      // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
      return function () { 
    
        // 保存函数调用时的上下文和参数，传递给 fn
        var context = this
        var args = arguments
    
        var now = +new Date()
    
        // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
        // 执行 fn，并重新计时
        if (last && now < last + threshhold) { 
          clearTimeout(timer)
    
          // 保证在当前时间区间结束后，再执行一次 fn
          timer = setTimeout(function () { 
            last = now
            fn.apply(context, args)
          }, threshhold)
    
        // 在时间区间的最开始和到达指定间隔的时候执行一次 fn
        } else { 
          last = now
          fn.apply(context, args)
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: /images/20220124/0ad6e591122b4a508ea6e3bbf249ee58.png