Vue自定义指令实现防抖/节流功能指南

前端

2024-01-26 05:15:45

防抖与节流

防抖和节流是两种常用的技术，可用于优化用户体验和提高应用程序的性能。

防抖在指定时间内只执行一次函数。如果在指定时间内函数被多次调用，则只有最后一次调用会被执行。防抖通常用于处理用户输入事件，例如文本输入或滚动事件。

节流在指定时间内只执行一次函数。如果在指定时间内函数被多次调用，则只有第一次调用会被执行。节流通常用于处理频繁触发的事件，例如鼠标移动或滚动事件。

Vue自定义指令

Vue自定义指令允许你扩展Vue的核心功能。你可以使用自定义指令来定义任何你想做的DOM操作。自定义指令可以是全局的，也可以是局部的。全局指令可以在任何Vue实例中使用，而局部指令只能在定义它们的Vue实例中使用。

实现防抖/节流

为了使用Vue自定义指令实现防抖/节流，我们需要创建一个新的指令。这个指令将接收一个函数作为参数，并将其包装成防抖或节流函数。

Vue.directive('debounce', {
  bind: function (el, binding) {
    let timeout = null;
    el.addEventListener('click', () => {
      if (timeout) {
        clearTimeout(timeout);
      }
      timeout = setTimeout(() => {
        binding.value();
      }, 300);
    });
  }
});

Vue.directive('throttle', {
  bind: function (el, binding) {
    let lastCall = 0;
    el.addEventListener('click', () => {
      const now = Date.now();
      if (now - lastCall > 300) {
        binding.value();
        lastCall = now;
      }
    });
  }
});

封装和使用

我们可以将防抖/节流指令封装成一个组件，以便在其他组件中使用。

const DebounceThrottle = {
  install: function (Vue) {
    Vue.directive('debounce', {
      bind: function (el, binding) {
        let timeout = null;
        el.addEventListener('click', () => {
          if (timeout) {
            clearTimeout(timeout);
          }
          timeout = setTimeout(() => {
            binding.value();
          }, 300);
        });
      }
    });

    Vue.directive('throttle', {
      bind: function (el, binding) {
        let lastCall = 0;
        el.addEventListener('click', () => {
          const now = Date.now();
          if (now - lastCall > 300) {
            binding.value();
            lastCall = now;
          }
        });
      }
    });
  }
};

Vue.use(DebounceThrottle);