防抖节流实现及封装

什么是防抖节流：

防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。
函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。 由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。

函数去抖（debounce ）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。 大概意思就是延时处理，然后如果在这段延时内又触发了事件，则重新开始延时。

两个方法都是用来提升前端性能，减轻浏览器压力。

vue中简单的防抖节流：

 timer: null // 计时器
   computed: {
        markerList() {
            return this.buildList.filter(v => v.checked)
        },
        getZoom() {
            return this.map.getZoom()
        }
    },
    watch: {
        markerList() {
            if (this.map.getZoom() < 18) {
                this.drawPopups()
            }
        },
        getZoom(val) {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                if (val > 18) {
                    this.removepopup()
                } else {
                    this.drawPopups()
                }
            }, 800)
        }
    },

封装版防抖节流：

// 节流
  throttle(fn, gapTime = 200) {
    let _lastTime = null;
    return () => {
      let _nowTime = +new Date();
      if (_nowTime - _lastTime > gapTime || !_lastTime) {
        fn();
        _lastTime = _nowTime;
      }
    };
  },
  // 防抖
  debounce(fn, gapTime = 200) {
    let timer;
    return () => {
      clearTimeout(timer);
      var context = this;
      var args = arguments; //保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
      timer = setTimeout(() => {
        fn.call(context, args);
      }, gapTime);
    };
  }
};