---

防抖

防抖：单位时间内多次点击，以最后一次为准。
形象的描述：王者里的回城，只要被打断就需要重新来（单位时间内，多次触发，且以最后一次为准）
例如：一个搜索输入框，用户不停的进行输入（这个时候就是抖动的过程），等用户输入停止之后，再触发搜索。

代码演示

function debounce(fn, delay = 200) {
  let timer = 0
  return function() {
    // 如果这个函数已经被触发了
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

节流

节流：单位时间内只触发一次，以第一次为准。
形象的描述下：想象一下王者荣耀的平a；或者技能CD冷却时间也好理解（单位时间内，只能触发一次，且以第一次为准）

例如：王者游戏里的英雄，你一个劲的使劲平a，会发现每次平a 过后都要短暂的停留一下，这就可以做到节流。
回归正题：drag（拖动）事件或者 scroll（滚动） 期间触发某个回调，要设置一个时间间隔。这时候就不能使用防抖了，为什么呢？
防抖是拖拽或者滚动结束之后才返回回调，但是我是需要在过程中进行触发回调，但是又不需要那么的频繁；这时候就使用节流函数，每隔一定的时间进行触发就好了！

代码演示

// 节流函数
function throttle(fn, delay = 200) {
  let  timer = 0
  return function () {
    if(timer){
      return
    }
    timer = setTimeout(() =>{
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

你可能会发现，防抖函数、节流函数很相似？
区别仅在于：
防抖：

 if(timer){
  clearTimeout(timer)
}
1
2
3

节流：

if(timer){
  return
}
1
2
3

他们在定时器已经有任务的时候，操作不同。
防抖函数在每一次都有内容后进行清除，是为了保证当前执行的函数就是（当前规定的时间内）执行的最后一次操作

 if(timer){
  clearTimeout(timer)
}
1
2
3

节流函数如此操作是为了保证，在规定的时间内只会执行第一次这个操作

if(timer){
  return
}
1
2
3

总结

遇到防抖，就想起王者荣耀里的 回城；

遇到节流，就想起王者荣耀里的 平a、技能cd冷却时间；