The debounce & throttle in Javascript（防抖与节流）

---

欢迎star和watch我的github issue blog，欢迎加入讨论。
您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。

---

节流[throttle]与防抖[debounce]在前端领域经常涉及，下面我们会尝试解释其中的原理与差异与实现以及一些应用场景

common sense

• 随着应用与需求复杂度不断上升，节流与防抖也出现了一些相同的设置其中一点就是可以选择触发的leading和trailing（前置或后置）或both。
• 一些文章中的immediate option与上面所谈到的设置leading: true类似。

debounce

debounce: Debounce technique allows us to "group" multiple sequential calls in a single one.
防抖： 防抖技术允许我们捆绑多个连续调用成为单一的一次调用。

可简单的理解防抖是将一次调用发生时的前后时间（TIMING）断内不允许再次触发，若多次触发则方法的真实调用根据设置可以在：

• 第一次触发时（leading）--- 这将导致后续连续的触发不再发生
• 最后一次触后间隔至少一个TIMING内没有被再次触发时调用（trailing）
• Both

例如当设置leading: true且 TIME = 400ms

防抖的实现：

/**
   * 返回一个函数，只要它一直被触发将不会被调用
   * 函数将在其不再被触发的N毫秒后调用，如果immediate被传入那么
   * 函数将在第一次触发是立即调用
   * 
   */

// es6 syntax import & export
export function deBounce(func, delay, immediate) {
    let timeout;

    return function executedFunction() {
      const context = this;
      const args = arguments;

      var later = function() {
        timeout = null;
        if(!immediate) func.apply(context, args);
      }

      const callNow = immediate && !timeout;

      clearTimeout(timeout);

      timeout = setTimeout(later, delay);

      if (callNow) func.apply(context, args);
    }
  }

// 这是其中的一种实现关于leading与trailing可自行调整immediate。

防抖的应用

这个简单的举个?： 在autocomplete中keypress事件与ajax配合使用可减少不必要的请求,可以参考Corbacho所作的demo.

throttle

throttle: Throttle technique don't allow us to execute our function more than once every X milliseconds.
节流： 节流技术是我们不能在X毫秒内触发第二次函数调用。

简单的理解节流就像控制水龙头单位时间内的出水量一样，在一个设定时间段内只能触发一次调用。若在一个时间段内连续触发多次函数真实调用根据设置可以在：

• 这个时间段的开头（leading）
• 这个时间段的结尾（trailing）
• Both

例如当设置leading: true且 TIME = 400ms

可见第一段中我一直在触发函数但正式但函数调用是在调用后但400ms后再次调用，在看第二段在首次触发后我在接着但300和400ms均匀触发函数但是后面不再触发导致函数没有方式第二次调用...

节流的实现

/**
  * 简单做法，leading
  */
  export function throttle(fn, limit) {  
    let delay = false
    return (...args) => {
      if (!delay) {
        fn.apply(this, args)
        delay = true
        setTimeout(() => {
          delay = false
        }, limit)
      }
    }
  }

节流的应用

个人看过一个比较有趣的例子是使用节流实现无限下拉，使用节流控制是保证用户在获取新内容可以即使但又不会过于频繁， demo在此。

注： 后续我会补充常见库的实现与异同，以及新API requestAnimationFrame