怎么实现截流和防抖

记录一下自己在 js 学习中常用到的一些方法，进行封装使用。 防抖和截流都是前端中常用的优化技术， 主要用于控制函数的执行频率，避免过多的重复执行。

防抖实现

防抖的实现思路是：当触发事件后，等待一段时间，如果在这段时间内没有再次触发事件，则执行函数。如果在等待时间内又触发了事件，则重新开始等待。这样可以避免事件的重复执行。

在 Vue 中，我们可以通过自定义指令的方式来实现防抖和截流的功能。

// 自定义指令 v-debounce
Vue.directive('debounce', {
  inserted: function (el, binding) {
    let timer = null;
    el.addEventListener('click', function () {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value();
      }, binding.arg || 1000);
    });
  }
});

上述代码中，我们定义了一个 v-debounce 指令，通过 el.addEventListener 来监听事件，如果已经存在定时器，则清除之前的定时器，并重新设置定时器。当等待时间到达时，执行 binding.value() 函数，即触发防抖后的执行操作。

使用示例：

<button v-debounce:5000="handleClick">防抖按钮</button>

在上述示例中，我们定义了一个防抖的按钮，等待时间为 5000ms，点击后会执行 handleClick 函数。

截流实现 截流的实现思路是：当触发事件后，先执行一次函数，并设置一个定时器，在定时器的时间内，如果再次触发事件，则不执行函数，直到定时器到达时间后，再次执行函数。这样可以控制函数的执行频率，避免过多的重复执行。

// 自定义指令 v-throttle
Vue.directive('throttle', {
  inserted: function (el, binding) {
    let timer = null;
    let isFirst = true;
    el.addEventListener('click', function () {
      if (isFirst) {
        isFirst = false;
        binding.value();
        timer = setTimeout(() => {
          isFirst = true;
        }, binding.arg || 1000);
      } else {
        clearTimeout(timer);
        timer = setTimeout(() => {
          isFirst = true;
          binding.value();
        }, binding.arg || 1000);
      }
    });
  }
});

上述代码中，我们定义了一个 v-throttle 指令，通过 el.addEventListener 来监听事件，如果是第一次触发，则直接执行 binding.value() 函数，并设置一个定时器，定时器到达时间后将 isFirst 设置为 true。如果不是第一次触发，则清除之前的定时器，并重新设置定时器。当定时器到达时间后，执行 binding.value() 函数，将 isFirst 设置为 true。

使用示例：

<button v-debounce:5000="handleClick">防抖截流</button>