js和vue 防抖（debounce）、节流（throttle）

防抖（debounce）：

        当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。

js实现：

/**
 * 函数防抖
 */
function debounce(fn, delay) {
  // 记录上一次的延时器
  var timer = null;
  var delay = delay || 200;
  return function() {
    var args = arguments;
    var that = this;
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
        fn.apply(that,args)
    }, delay);
  }
}

节流（throttle）：

       当持续触发事件时，有规律的每隔一个时间间隔执行一次事件处理函数。

/**
 * 函数节流
 */
function throttle(fn,delay){
  var lastTime;
  var timer;
  var delay = delay || 200;
  return function() {
    var args = arguments;
    // 记录当前函数触发的时间
    var nowTime = Date.now();
    if (lastTime && nowTime - lastTime < delay) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        // 记录上一次函数触发的时间
        lastTime = nowTime;
        // 修正this指向问题
        fn.apply(this, args);
      }, delay);
    }else{
      lastTime = nowTime;
      fn.apply(this, args);
    }
  }
} 

注意：setTimeout内 this失效，所以用apply重指向

对比理解：

       防抖和节流都可以用于 mousemove、scroll、resize、input等事件，他们的区别在于防抖只会在连续的事件周期结束时执行一次，而节流会在事件周期内按间隔时间有规律的执行多次。

Vue防抖节流，引入lodash

import _ from 'lodash'
export default {
  name: 'demo',
  methods: {
    getName() {
      console.log('my name is ctj')
      return
    }
  },
  mounted() {
    this.debounceGetName = _.debounce(this.changeStr, 500)
  }
}