JS throttle与debounce的区别

前端下午茶

发布于 2018-10-22 14:43:53

2.8K0

发布于 2018-10-22 14:43:53

文章被收录于专栏：前端下午茶

JS throttle与debounce的区别

一般在项目中我们会对input、scroll、resize等事件进行节流控制，防止事件过多触发，减少资源消耗；在vue的官网的例子中就有关于lodash的debounce方法的使用，当时也提到了throttle，但一直没搞明白节流 throttle 与 去抖 debounce具体区别在哪里，所以花了点时间来搞清楚。

1. 区别

节流 throttle 与 去抖 debounce的区别主要在触发时机上：

debounce(func, wait, options)：创建并返回函数的防反跳版本，将延迟函数的执行（真正的执行）在函数最后一次调用时刻的wait毫秒之后，对于必须在一些输入（多是一些用户操作）停止之后再执行的行为有帮助。将一个连续的调用归为一个，如果连续在wait毫秒内调用，最后只有最后一次会执行
throttle(func, wait, options)：创建并返回一个像节流阀一样的函数，当重复调用函数的时候，最多每隔指定的wait毫秒调用一次该函数；不允许方法在每wait毫秒间执行超过一次，如果连续在wait毫秒内调用，最后执行会均匀分布在大约每wait一次

对于lodash来说，throttle是调用debounce来实现的，throttle 和 debounce 最终都会都会调用 debounce 方法。当调用 _.debouncelodash会返回一个函数，这个函数在被调用时会生成一个 setTimeout(delayed, delay)。其中 delayed 又是一个内部方法，在 delayed 被调用时进行如下检测：当前时间 - 上次func被调用事件是否小于 0 或大于 delay ？如果是则执行一次 func，记录并返回执行结果，同时更新上次被调用时间；如果不是则调用 setTimeout 进行下一次的判断。_.throttle 方法只不过是多给 debounce 传了一个 options = {maxWait: $maxWait, leading: true, trailing: true}，这个选项的意思是至少保证在每 maxWait 时间让 func 被调用一次。

可以看下面的栗子：

这个图中图中每个小格大约30ms，右边有原生mouseover事件、lodash与jQuery节流去抖插件的debounce与throttle事件。在图左区域移动鼠标时：对于debounce，mouseover事件一直没有被调用，直到停下来才被调用一次。而throttle是每wait毫秒就调用一次。

2. 使用场景

debounce:第一次触发后，进行倒计wait毫秒，如果倒计时过程中有其他触发，则重置倒计时；否则执行。用它来丢弃一些重复的密集操作，直到流量减慢。 throttle:第一次触发后先执行fn（lodash可以通过{leading: false}来取消），然后wait ms后再次执行，在单位wait毫秒内的所有重复触发都被抛弃。即如果有连续不断的触发，每wait ms执行fn一次，用在每隔一定间隔执行回调的场景。

mouse move 时减少计算次数：debounce
input 中输入文字自动发送 ajax 请求进行自动补全： debounce
ajax 请求合并，不希望短时间内大量的请求被重复发送：debounce
resize window 重新计算样式或布局：debounce 或 throttle
scroll 时触发操作，如随动效果：throttle
对用户输入的验证，不想停止输入再进行验证，而是每n秒进行验证：throttle

3. 简单实现

3.1 去抖 debounce

按照上面的说明，去抖就是连续多次delay内的操作取最后一次操作真正执行。

let reduceEvent
function debounce(cb, delay) {
  if (!reduceEvent) {
    reduceEvent = setTimeout(() => {
      cb()
      console.log('执行啦！！')
      reduceEvent = null
    }, delay)
  }
}

setTimeout(() => debounce(() => console.log(1), 2000), 1000)         // 打印: 1 执行啦！！
setTimeout(() => debounce(() => console.log(2), 2000), 2000)
setTimeout(() => debounce(() => console.log(3), 2000), 2000)
setTimeout(() => debounce(() => console.log(4), 2000), 4000)         // 打印: 4 执行啦！！

3.2 节流 throttle

按照上面的说明，节流就是连续多次delay内的操作按照指定的间隔来执行。

function throttle(func, wait = 200) {
  let last = 1
  let timer
  return function(...rest) {
    const now = +new Date()
    if (last && now - last < wait) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now
        func.apply(this, rest)
      }, wait)
    } else {
      last = now
      func.apply(this, rest)
      clearTimeout(timer)
    }
  }
}
const task = throttle(() => console.log(1), 2000)
setTimeout(task, 0)
setTimeout(task, 500)
setTimeout(task, 1000)
setTimeout(task, 2000)                 // 打印: 1 1

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~