节流和防抖动

起因

面试被问到了节流和防抖动, 自己对这两个的概念比较模糊, 都不知道回答了什么鬼

从语文和英语学起

首先, 先看字面意思:
节流(throttle)的意思就是水龙头关小点, 频率不要那么高
防抖动(debounce), 这根弹簧, 你不要来回蹦了, 我就要你最后停下来的没有发生形变的那一刻

举个例子

节流: 在改变窗口大小的时候, resize事件会触发. 可能窗口大小变化了一下就触发了几十次事件, 但我希望就只触发那么十几次事件 , 这就叫节流.
防抖动: 在改变窗口大小的时候, resize事件会触发. 可能窗口大小变化了一下就触发了几十次事件, 但我希望只有在大小改变完(经过一定长的时间), 才触发一次事件 , 这就叫防抖动

简单的实现

虽然上面说了那么多, 但好像还不是很懂怎么用啊, 怎么写啊? 那就搜搜别人的博客和一些成熟的库看他们是怎么设计这个函数以及使用的

throttle

throttle(func, [wait=0])
Creates a throttled function that only invokes func at most once per every wait milliseconds(throttle方法返回一个函数, 在wait毫秒里, 这个函数最多只会调用一次func)

参数和返回值都知道了, 那就写吧

function throttle (func, wait = 0) {
  let timer
  let start
  let now

  return function () {
    const ctx = this
    const args = arguments
    now = new Date().getTime()
    // 如果不是第一次, 并且时间间隔还没有过去wait毫秒
    if (start && now - start < wait) {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout (() => {
        func.apply(ctx, args)
        start = now
      }, wait)
    } else {
      func.apply(ctx, args)
      start = now
    }
  }
}

debounce

debounce(func, [wait=0])
Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked(debounce方法返回一个函数, 这个函数的调用func的间隔, 至少隔了wait毫秒)

function debounce (func, wait = 0) {
  let timer

  return function () {
    const ctx = this
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(ctx, args)
    }, wait)
  }
}

应用与实践

到这里, 单单看代码的话, throttle和denounce也是贼像. 还是要应用多了才能更深入地理解的. 然而自己应用上也是浅薄, 还是安利一下别人的文章吧, Debouncing and Throttling Explained Through Examples, 中文翻译

其他的参考文章:
分析_的.debounce和.throttle
Debounce 和 Throttle 的原理及实现