vue 封装节流 详细代码讲解

当我们需要在Vue组件中使用节流函数来控制事件的触发频率时，可以通过封装一个节流函数来实现。

下面是一个使用Vue封装节流函数的示例代码：

// throttle.js
export default function throttle(func, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

在上面的代码中，我们定义了一个名为`throttle`的函数，它接受两个参数：`func`和`delay`。

`func`是需要进行节流的函数，`delay`是延迟的时间间隔。

在函数内部，我们使用了一个`timer`变量来保存定时器的引用。当事件被触发时，我们先检查定时器是否存在。如果定时器不存在，则创建一个新的定时器，并在延迟时间后执行传入的函数`func`。同时，我们将定时器设置为null，表示定时器已经执行完毕。如果定时器存在，则不执行任何操作。

使用这个节流函数可以在Vue组件中进行如下的调用：

import throttle from './throttle';

export default {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    this.throttledIncrement = throttle(this.increment, 1000);
  },
  methods: {
    increment() {
      this.count++;
    },
    handleClick() {
      this.throttledIncrement();
    },
  },
};

在上面的代码中，我们在Vue组件的`created`生命周期函数中创建了一个名为`throttledIncrement`的函数，它使用了之前封装的节流函数`throttle`。`throttledIncrement`函数会在每次点击事件触发时调用`increment`方法，但是最多每秒钟触发一次。

这样做的好处是可以避免因为事件频繁触发导致性能问题，同时保证用户体验。