防抖和节流的vue自定义指令

一、防抖的定义及应用场景

1、定义

防抖是指在一段时间内只要有事件触发，就重新计算时间，直到这段时间内没有事件触发，才真正的执行事件；

2、应用场景

当用户点击按钮过快，导致重复点击，多次调用接口；或者输入框的文字一变化就调用接口，导致多次调用接口。此时，我们肯定是希望哪怕多次点击按钮，也只调用一次接口；也不希望输入框每输入一个字母就发送一次请求，那样页面就会频繁地发送请求，极大的浪费资源。

3、防抖的自定义指令实现

// 防抖指令
import Vue from "vue";

// 创建一个防抖函数
function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

Vue.directive("debounce", {
  inserted: function (el, binding) {
    const debouncedClick = debounce(() => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, binding.value || 500);
      }
    }, binding.value || 500);
    el.addEventListener("click", debouncedClick);
  },
});

二、节流的定义及应用场景

1、定义

是指对于连续触发的事件，每隔一段时间内执行一次，节流里面涉及的时间主要指时间执行的间隔时间。

 2、应用场景

通常用于一些高频率的事件中，比如 鼠标滚动、窗口resize、滚动条滑动 等操作。在这种情况下，我们希望这些事件能够以一定的频率触发（要触发多次），但不是每次事件都触发，节流函数可以规定在一定时间间隔中，该方法只执行一次。这样可以减少函数的执行次数，优化性能。

3、防抖的自定义指令实现

// 节流指令
import Vue from "vue";

// 创建一个节流函数
function throttle(func, wait) {
  let inThrottle;
  return function () {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), wait);
    }
  };
}

Vue.directive("throttle", {
  inserted: function (el, binding) {
    const throttledClick = throttle(() => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, binding.value || 500);
      }
    }, binding.value || 500);
    el.addEventListener("click", throttledClick);
  },
});