Vue2项目使用lodash插件 节流 和 防抖

事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿现象）。

可以采用debounce（防抖）和throttle（节流）的方式来减少事件调用频率，同时又不影响实际效果。 使用lodash插件，该插件提供了防抖和节流的函数，同时也可以自己写防抖和节流的函数（使用闭包 + 定时器）。

实际问题：当鼠标经过左侧的连接时，打印当前 a 标签索引值，鼠标快速从上滑到下面，正常情况下，应该从 0打印到 15，实际上只打印了其中一部分，这就是由于短时间内频繁触发了 mouseenter事件，浏览器反应不过来。如果当前调用的回调函数中，有大量的数据、DOM节点等操作，会造成页面卡顿。

 使用lodash插件的节流函数，解决该问题，触发mouseenter事件的完整函数如下：

 methods: {
    // 一级分类 鼠标进入修改响应数据 currentIndex 属性
    // changeIndex(index) {
    //   // index 鼠标移上某一个一级分类的元素的索引值
    //   // 正常情况（用户慢慢的操作）：每一个一级分类h3都会触发鼠标进入事件
    //   // 非正常情况（用户的操作很快）：本身全部的一级分类都应该触发鼠标进入事件，但是经过测试 只有部分h3触发
    //   // 就是由于用户的行为过快，导致浏览器反应不过来，如果当前回调函数中 有大量业务，有可能出现卡顿现象
    //   this.currentIndex = index;
    //   console.log(index);
    // },
    // throttle 的回调函数，不要用箭头函数，可能出现上下文 this 问题
    changeIndex: throttle(function (index) {
      this.currentIndex = index;
    }, 50),

    // 一级分类 鼠标移除的时间回调
    leaveIndex() {
      // 鼠标移除，
      this.currentIndex = -1;
    },
  },

注意：

• methods中一定不要使用简写形式
• 节流（规定的事件范围内只执行一次）：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，吧频繁触发变为少量触发 ,'_.throttle(function(){}, time)'
• 防抖（只执行最后一次）：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速触发 只会执行一次 ,'_.debounce(function(){}, time)'