vue2 input 防抖节流

Vue2中的Input防抖和节流可以通过自定义指令来实现。所谓防抖和节流，是为了避免用户频繁操作输入框或者触发事件而导致过多的数据请求或者回调函数调用，从而提高页面性能和用户体验。

防抖：在输入框或者事件触发后，等待一段时间（例如300ms），如果这段时间内没有再次输入或者触发事件，则执行回调函数；如果再次输入或者触发事件，则重新计时。

节流：在输入框或者事件触发后，等待一段时间（例如300ms），只执行一次回调函数，不管这段时间内有没有再次输入或者触发事件。

下面是Vue2中实现防抖和节流的自定义指令代码：

// 防抖指令
Vue.directive('debounce', {
  inserted: function (el, binding) {
    let timer = null;
    el.addEventListener('input', () => {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        binding.value();
      }, binding.arg || 300);
    });
  }
});

// 节流指令
Vue.directive('throttle', {
  inserted: function (el, binding) {
    let timer = null;
    let flag = true;
    el.addEventListener('input', () => {
      if (flag) {
        flag = false;
        timer = setTimeout(() => {
          flag = true;
          binding.value();
        }, binding.arg || 300);
      }
    });
  }
});

使用时，可以在模板中添加指令并传入对应的回调函数和时间间隔参数：

<template>
  <input v-debounce="handleInput" :arg="500" />
  <input v-throttle="handleInput" :arg="500" />
</template>

<script>
export default {
  methods: {
    handleInput() {
      // 回调函数
    }
  }
};
</script>