防抖和节流的含义和应用场景

防抖（debounce）

debounce函数它在被调用后会等待一段时间（自己设置）再执行。 如果在等待期间函数再次调用，之前还未执行的调用会被取消。重新计时在继续执行

简单来说：只要前一个函数没有执行完，那么在进行新的调用，后一个会取代前一个，并重新计师，由最后一次事件触发决定

function debounce(fn, delay) {
        var timer = null;
        return function () {
          var context = this,
            args = arguments;
          // 如果此时存在定时器的话，则取消之前的定时器重新记时
          if (timer) {
            clearTimeout(timer);
            timer = null;
          }
          // 设置定时器，使事件间隔指定事件后执行
          timer = setTimeout(() => {
            fn.apply(context, args);
          }, delay);
        };
      }

节流（throttle）

throttle函数的目的很简单， 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

简单来说：在一个段时间内只能只能做一件事，由第一次事件触发决定

function throttle2(fn, delay) {
  let last = null
  return function throttle_fn() {
    if(last === null) {
      last = setTimeout(() => {
        fn.apply(this, arguments)
        last = null // 清除已执行的计时器标记
      }, delay)
    }
  }
}

　应用场景

防抖(debounce)

　　　　search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

　　　　window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

　　节流(throttle)

　　　　鼠标不断点击触发，mousedown(单位时间内只触发一次)

　　　　监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

               发送手机验证码，点击第一次需要在一分钟以后才能在次点击才能再次发送