搜索框：节流与去抖动

debounce：去抖动
throttle：节流

为什么会出现节流与去抖动？

当我们在搜索框输入关键词进行搜索时，我们并不希望看到每输入一个拼音就向服务器发送一次请求，这样会对服务器造成一定的压力。而这两个词的出现，就是为了缓解这个问题，可以避免事件的频繁出发，也是两种解决方案。

1. debounce：利用定时器，让函数执行延迟固定的时间执行：比如500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。就是当你停止输入500毫秒后才会执行函数。

  debounce(func, wait) {
    // wait：500ms；func：被频繁触发的事件
    let timeout;
    return function () {
      let context = this;
      let args = arguments;
      let later = () => {
        timeout = null;
        func.apply(context, args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    }
  },

2. throttle：会预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

// 方法一
  function throttle(method, delay, time) {
     var timeout, startTime = +new Date();
     return function() {
         var context = this,
         args = arguments,
         curTime = +new Date();
         clearTimeout(timeout);
         // 如果达到了规定的触发时间间隔，触发 handler
         if (curTime - startTime >= time) {
           method.apply(context, args);
           startTime = curTime;
         } else {
           // 没达到触发间隔，重新设定定时器
           timeout = setTimeout(method, delay);
        }
 };

// 方法二
 function throttle(fn, gapTime) {
    let _lastTime = null
    return function () {
      let _nowTime = + new Date()
      if (_nowTime - _lastTime > gapTime || !_lastTime) {
        _lastTime = _nowTime;
        fn.apply(this, arguments)  
      }
    }
  }

两者的区别：
拿onscroll事件来说，如果使用的是抖动的话，只用当滚动停止后才会执行回调函数，在滚动的过程是不会执行的；节流不同，滚动的时候每隔一个时间周期就会执行一次回调，然后进入下一个新周期。

具体使用时，需根据具体的业务场景来做选择：
节流：滚动事件、座位图的缩放等；
防抖动：搜索框

参考文章：
js函数节流和去抖动