节流

节流定义
节流英文throttle，各工具库函数基本统一使用throttle命名。节流顾名思义就是限制流量。比如马路上的车流量；如果连续有很多车量申请通过高速路口，但是高速路口的规定就是1s只允许通过1辆车，那这就是节流。即规定时间内，某函数只允许触发1次，即便有多次调用。

适用场景：函数被频繁调用的场景如 window.onresize() 事件、window.onscroll() 事件、mousemove 事件、上传进度等情况
原理与实现
实现方案有2种：
1、原理：利用计时器计算此次调用与上次函数执行时的时间差，超过设定间隔则执行，不然就算了。
实现：

const throttle = (fn, wait = 100) => {
  let previous = 0;
  return function(...args) {
    let now = +new Date();
    if (now - previous > wait) {
      previous = now;
      fn.apply(this, args)
    }
  }
}

效果：

throttle1.png

分析：绑定在 mousemove 上的事件，经过 throttle 调用。此实现方式为开始即触发，但最后不会触发（看上图的最后部分）

2、原理：初次调用函数，函数直接执行，执行后设置一个定时器，指定下次执行时机；下次函数调用，如果发现有定时器，就算了...
实现：

const throttle = (fn, wait = 50) => {
 let timer = null;
 return function(...args) {
  if (timer) return;
    fn.apply(this, args)
    timer = setTimeout(() => {
       timer = null;
       fn.apply(this, args)
   }, wait);
  }
}

效果：

throttle2.png

分析：绑定在 mousemove 上的事件，经过 throttle 调用。此实现方式为开始即触发，但最后也会触发（看上图的最后部分）

防抖

防抖定义
防抖英文debounce，各工具库函数基本统一使用debounce命名。防抖顾名思义就是防止抖动。比如想给博主点赞，使用外挂手速很快，每秒最高可点10000 下，那这就对其他博主很不公平，就要进行限制，规定只要你连续点，只有当你最后那次才有效，那这就是防抖。即函数防抖 debounce 指的是某个函数在某段时间内，无论触发了多少次，都只执行最后一次。
适用场景：表单提交、邮件发送、下单等操作，防止「手滑」重复提交
原理与实现
1、原理：利用定时器设定经过多少时间触发，持续调用就重新计时。
实现：

function debounce(fn, wait = 50) {
  let timer = null

  return function(...args) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
          fn.apply(this, args)
      }, wait)
  }
}

效果：

debounce1.png

分析：绑定在 mousemove 上的事件，经过 debounce 调用。此实现方式为开始不触发，停止mousemove 后经过指定时间触发（看上图的最后部分）

2、上面实现方式的效果是持续触发都不会进行函数调用，只有停止时才调用，那如果想开始就立即调用呢？
实现：

function debounce(fn, wait = 50) {
  let timer = null
  return function(...args) {
      if (timer) clearTimeout(timer)
      if (!timer) {
          fn.apply(this, args)
      }
      timer = setTimeout(() => {
          timer= null;
          fn.apply(this, args)
      }, wait)
  }
}

效果：