简单的聊聊节流和防抖

防抖函数（debounce）和节流函数（throttle）为了防止函数被连续调用而被发明出来。
说说他们的异同之处，这里以我的话（我觉得）来解释一下。

他们的区别动画

防抖函数（debounce）

函数在某个时间段内被连续触发，在最后一次触发后再执行

场景：一个搜索框，需要触发input事件，来实时的请求服务端的数据。某个用户想搜索NIKE买一波鞋子，如果不做处理的话，那么浏览器会发起四次请求N,NI,NIK,NIKE。这在某种情况下（需要限制的情况）就造成了资源浪费。理想状态下，等用户输入完成NIKE之后，再去向服务端发起请求。为了防止这样的连续请求，防抖函数（debounce）就很必要了。在用户停止输入后的1s后再去请求数据就比较合适了。

针对以上场景简述一下原理：
有点绕如果input事件一直触发，那么Ajax就一直不触发，直到input事件1s内不触发，Ajax才触发。

function debounce(fun, delay) {
  var timer;
  return function() {
    // 如果一直触发input事件，就一直清除之前的定时器
    clearTimeout(timer);
    // 清除之后再定义一个新的定时器，准备执行的方法
    timer = setTimeout(() = >{
      // 把this指向对应的input方便操作,然后传参
      fun.apply(this, arguments)
    },
    delay)
  }
}

document.querySelector('input').oninput = debounce(function(event) {
  // Ajax(event.target.value)
},1000)

节流函数（throttle）

函数在某个时间段内被连续触发，只执行一次

场景：一个搜索按钮，某个用户为了好玩在2S内点击了100次，如果不做处理的话，会连续多次向服务器发起请求，服务器不堪重负了。那么如果我们在这里使用节流函数，让点击的事件1s内只触发1次

针对以上场景简述一下原理：
当click事件执行一次之后，需要等到第2s才能执行下一次，在这期间的click事件无效

function throttle(fun, threshhold = 1000) {
  var timer, start = Date.now();
  return function() {
    var now = Date.now();
    // 如果一直触发click事件，就一直清除之前的定时器
    clearTimeout(timer);
    // 当前时间 - 之前执行时的时间  执行间隔时间是够超过规定的时间
    if (now - start >= threshhold) {
      fun.apply(this, arguments);
      start = now;
    } else {
      timer = setTimeout(() = >{
        fun.apply(this, arguments);
      },threshhold)
    }
  }
}

document.querySelector('button').onclick = throttle(function(event) {
  // Ajax()
},2000)

如果对这两种函数的区别还有困惑的话,再仔细琢磨一下好了
他们的区别动画

防抖函数（debounce）和节流函数（throttle）的都简单实现了，lodash对这这两种函数有更加复杂的实现
lodash的debounce实现
lodash的throttle实现