Debounce 和 Throttle 的原理及实现

Benedict Evans 发布于2019-08-22 18:41 / 2948人阅读

摘要：和的原理及实现和均是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。两者在概念理解上确实比较容易令人混淆，强制函数在某段时间内只执行一次，强制函数以固定的速率执行。和等事件与此类似。

throttle和debounce均是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，throttle并没有实质上减少事件的触发次数。两者在概念理解上确实比较容易令人混淆，

debounce 强制函数在某段时间内只执行一次，throttle 强制函数以固定的速率执行。在处理一些高频率触发的 DOM 事件的时候，它们都能极大提高用户体验。

在处理诸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等事件的时候，通常我们不希望这些事件太过频繁地触发，尤其是监听程序中涉及到大量的计算或者有非常耗费资源的操作。

有多频繁呢？以 mousemove 为例，根据 DOM Level 3 的规定，「如果鼠标连续移动，那么浏览器就应该触发多个连续的 mousemove 事件」，这意味着浏览器会在其内部计时器允许的情况下，根据用户移动鼠标的速度来触发 mousemove 事件。（当然了，如果移动鼠标的速度足够快，比如“刷”一下扫过去，浏览器是不会触发这个事件的）。resize、scroll 和 key* 等事件与此类似。

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

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)
  }
}

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

Throttle

throttle 的概念理解起来更容易，就是固定函数执行的速率，即所谓的“节流”。正常

/**
*
* @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)
    }
  }
}

两者应用之后，直接带来的效率。如果还是不能完全体会 debounce 和 throttle 的差异，可以到这个页面看一下两者可视化的比较。

参考地址

GPU云服务器云服务器 volatile的实现原理回调的原理、实现与应用 cdn的原理和架构 ddos攻击原理及防范

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96095.html

浅谈throttle以及debounce的原理和实现

摘要：浅谈以及的原理和实现背景日常开发中我们经常会遇到一些需要节流调用或者压缩调用次数的情况例如之前我在完成一个需求的时候就遇到了因为后端并发问题导致收到多条信息从而导致函数被重复调用的情况当时的做法是通过对函数的调用进行注册遇到多次调用的时候清浅谈throttle以及debounce的原理和实现背景日常开发中,我们经常会遇到一些需要节流调用,或者压缩调用次数的情况,例如之前我在完成...

jsbintask 2019-08-20 19:08 评论0 收藏0
彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
throttle 和 debounce 简单实现

摘要：但是，我在测试中，智能手机中的慢速滚动可能会触发每秒多达个事件。把电梯完成一次运送，类比为一次函数的执行和响应。假设电梯有两种运行策略和，超时设定为秒，不考虑容量限制。保证如果电梯第一个人进来后，秒后准时运送一次，不等待。使用场景某些场景下，一些计算量比较大的函数，操作 DOM 函数等函数会被频繁调用执行，而且由于人的反应有限实际不需要那么多计算，就会造成极大的性能浪费。举个例子当...

Taste 2019-08-22 18:17 评论0 收藏0
节流和防抖动

摘要：起因面试被问到了节流和防抖动自己对这两个的概念比较模糊都不知道回答了什么鬼从语文和英语学起首先先看字面意思节流的意思就是水龙头关小点频率不要那么高防抖动这根弹簧你不要来回蹦了我就要你最后停下来的没有发生形变的那一刻举个例子节流在改变窗口大小起因面试被问到了节流和防抖动, 自己对这两个的概念比较模糊, 都不知道回答了什么鬼从语文和英语学起首先, 先看字面意思:节流(throttl...

hellowoody 2019-08-22 15:41 评论0 收藏0