完全弄懂节流和防抖

节流和防抖

这两个东西，你确定听过，就是两种优化浏览器性能的手段。相关文章你确定也看过，若是仍是不太清楚，不要紧，看完这篇短文，相信你能轻松理解其中差异。

防抖（deounce）

咱们先说防抖吧，这里有个小笑话，看完你应该就秒懂了：

小明军训，教官发令：向左转！向右转！向后转！你们都照着作，惟有小明坐下来休息，教官火的一批，大声斥问他为啥不听指挥？小明说，我准备等你想好到底往哪一个方向转，我再转。

虽然是个笑话，却很好地说明了防抖的定义：给一个固定时间，若是你开始触发动做，而且在这个固定时间内再也不有任何动做，我就执行一次，不然我每次都会从新开始计时。咱们能够用极端状况理解它：若是给定时间间隔足够大，而且期间一直有动做触发，那么回调就永远不会执行。放在笑话的语境里就是，只有教官最后一次发号后，小明才会转。

节流（throttle）

若是你理解了防抖，关于节流，就更好理解了

学生上自习课，班主任五分钟过来巡视一次，五分钟内随便你怎么皮，房顶掀了都没事，只要你别在五分钟的时间间隔点上被班主任逮到，逮不到就当没发生，逮到她就要弄你了。

在这里，班主任就是节流器；你搞事，就是用户触发的事件；你被班主任逮住弄，就是执行回调函数。

节流的定义：用户会反复触发一些操做，好比鼠标移动事件，此时只须要指定一个“巡视”的间隔时间，无论用户期间触发多少次，只会在间隔点上执行给定的回调函数。，咱们一样能够用极端状况来理解：若是给定的间隔时间是 240毫秒，用户永不间断地在屏幕上疯狂移动鼠标，那么你的回调函数会分别在 240毫秒、 480毫秒、 720毫秒... 就这么一直执行下去

这俩有啥用？

• 防抖（deounce）:
  • 可用于input.change实时输入校验，好比输入实时查询，你不可能摁一个字就去后端查一次，确定是输一串，统一去查询一次数据。
  • 可用于 window.resize 事件，好比窗口缩放完成后，才会从新计算部分 DOM 尺寸
• 节流（throttle），用于监听 mousemove、 鼠标滚动等事件，一般可用于：拖拽动画、下拉加载。

节流一般用在比防抖刷新更频繁的场景下，并且大部分是须要涉及动画的操做。

Talking is cheap show me the code

防抖

function debounce (fn, delay = 200) {
  let timeout;
  return function() {
    // 从新计时
    timeout && clearTimeout(timeout);
    timeout = setTimeout(fn.bind(this), delay, ...arguments);
  }
}

const handlerChange = debounce(function () {alert('更新触发了')})

// 绑定监听
document.querySelector("input").addEventListener('input', handlerChange);

复制代码

节流

function throttle (fn, threshhold = 200) {
  let timeout;
  // 计算开始时间
  let start = new Date();
  return function () {
    // 触发时间
    const current = new Date() - 0;
    timeout && clearTimeout(timeout);
    // 若是到了时间间隔点，就执行一次回调
    if (current - start >= threshhold) {
      fn.call(this, ...arguments);
      // 更新开始时间
      start = current;
    } else {
      // 保证方法在脱离事件之后还会执行一次
      timeout = setTimeout(fn.bind(this), threshhold, ...arguments);
    }
  }
}

let handleMouseMove = throttle(function(e) {
  console.log(e.pageX, e.pageY);
})

// 绑定监听
document.querySelector("#panel").addEventListener('mousemove', handleMouseMove);
复制代码

从代码上看不难发现，节流只是在防抖的基础上加了时间差的判断，多穿了件马甲而已。

小兄弟，你是否还有不少问号？？

1. 防抖用在 input.change 上我能理解，鼠标拖拽功能为啥不能用防抖？用的话会发生什么？

   仔细想想，简单来讲，防抖实际上是只会触发一次，明显不能用在这种拖拽场景下，若是硬用上去，会出现用户拖了弹框它不动，过了一下子“啪”地就跳过去了。出现这种状况，老板是要请你喝茶的。

2. 节流的代码，为何要加上那句 setTimeout ？我不加会怎么样？

   这句代码的主要做用，说白了其实就是“兜底”，它确保了你的回调无论怎么样，必定会执行一次。仍是用鼠标拖拽弹框功能举例，这个兜底解决了拖拽弹框在速度很快的状况下弹框不动的问题、也确保你最后拖拽完成，放开鼠标，弹框能回到你鼠标的位置，就是代码注释里写的：保证方法在脱离事件之后还会执行一次。

其实这两个问题，是我初见防抖和节流的时候所疑惑的，但愿也能帮助到你。

再深刻一点

原本是没有写这块内容的，可是评论区有朋友指出了节流函数存在的问题，我就顺带着又了解了一些防抖和节流的细节。

咱们能够从上面的节流函数入手，你可否看出存在什么问题呢？这个也是评论区朋友指出的：这个节流函数第一次不会当即执行，而是会等待一段时间执行，而且这个等待时间越长，延迟越是明显，咱们用这个思路再审视一下防抖函数，也一样有这个问题。

那么怎么解决呢？针对防抖和节流，其实有当即执行和非当即执行两种版本，上面写的就是非当即执行版本。想解决上面的问题也很简单，把函数改造一下，使用当即执行版本就能够了~只须要改变一行代码。（同理，节流也是相似）

// 当即执行的防抖函数
function debounce (fn, delay = 200) {
  let timeout;
  return function() {
    // 若是 timeout == null 说明是第一次，直接执行回调，不然从新计时
+   timeout == null ? fn.call(this, ...arguments) : clearTimeout(timeout);
    timeout = setTimeout(fn.bind(this), delay, ...arguments);
  }
}

const handlerChange = debounce(function () {alert('更新触发了')})

// 绑定监听
document.querySelector("input").addEventListener('input', handlerChange);

复制代码

可视化

若是你仍是没法直观感觉两者差异，进入 传送门

本篇文章已收录入 前端面试指南专栏

相关参考

知乎：函数防抖与函数节流 文章是大佬司徒正美写的，谨以技术缅怀大佬。

总结

关于节流和防抖这两个概念，我也看过不少解说，说实话，不多有文章能真的说清楚的。基本上就是官腔+代码流的一套组合拳，都在说 Talking is cheap show me the code，可是不少时候，每每是 Fucking code is so difficult, talk to me please. 真正能让人豁然开朗的，应该是大白话。

真心但愿这篇文章能帮到你，帮到了点个赞，感谢！