按钮防抖指令

防抖的意思

防抖的字面意思就是防止抖动，在开发领域的理解就是防止频繁进行其他操作，限制频率，只执行一次操作。常见的场景，发送短信，支付等。

防抖的核心思想

实现防抖的核心思想就是在规定的时间间隔内只触发最后一次。通过定时器控制事件的触发频率，其关键点就是在于每点击一次就清空定时器重新计时，假设设置防抖的时间是1s，也就是在这1s内无论点击多少次，都清空定时器，从点击的那一刻重新计时，假设第一次点击的时刻是0s,最后点击的那次时刻是0.5s,那么真正触发事件的时刻是在1.5s。

• 实现代码

/**
 * v-debounce  按钮防抖指令，
 * 功能：多次点击按钮会多次触发事件，如果是在表单提交就会多次调用后端接口，就会达不到需求，防止多次触发。
 * 通过监听点击事件设置定时器，设置几秒内才触发点击事件，通过绑定和解绑移除事件。
 * 接收参数：function类型
 */
import type { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {
  __handleClick__: () => any;
}
const debounce: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    if (typeof binding.value !== "function") {
      throw "callback must be a function";
    }
    let timer: NodeJS.Timeout | null = null;
    el.__handleClick__ = function () {
      if (timer) {
        clearInterval(timer);
      }
      timer = setTimeout(() => {
        binding.value();
      }, 500);
    };
    el.addEventListener("click", el.__handleClick__);
  },
  beforeUnmount(el: ElType) {
    el.removeEventListener("click", el.__handleClick__);
  },
};

export default debounce;