vue中使用防抖和截流

今天，在项目开发工程中需要使用防抖，下面跟大家分享下防抖和截流的基础知识，顺便分享一个踩到的坑。

一、防抖

直接上代码看的清楚：

/**
 * 防抖
 * @param {Function} fn
 * @param {Number} delay
 */
export function _debounce(fn, delay = 200) {
  var timer;
  return function () {
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, delay);
  };
}

防抖，就是在单位时间内执行最后一次，按需使用。

二、截流

也是直接上代码：

/**
 * 截流
 * @param {Function} fn
 * @param {Number} interval
 */
export function _throttle(fn, interval = 200) {
  var last;
  return function () {
    var args = arguments;
    var now = +new Date();
    if (!last || now - last > interval) {
      last = now;
      fn.apply(this, args);
    }
  }
}

截流，就是在设置的单位时间内只执行第一次，按需使用。

想了解防抖截流更详细的介绍和方法请移步：http://t.csdn.cn/pcRhN

如何使用！！！！

将方法import到vue组件中，然后：

    init: _debounce(function (val) {
      // 逻辑操作
    }, 1000)
    

在这里我踩了一个坑，我认为在使用中用箭头函数this的指向会是vue实例，所以一开始我的使用方法：

    init: _debounce((val) => {
      // 这里this是undefined
    }, 1000)
    

产生的原因就是：箭头函数没有this，函数中的this指向所处的上下文中的this，而且使用bind、apply、call等方法没办法修改，在上面的防抖和截流的方法中用apply修改this的指向未成功，所以在调用的方法中this为undefined。