前端添加节流方法,自定义指令

• 节流 (Throttling)：节流函数确保事件处理函数在一定时间内只执行一次，而不是频繁执行。
• 防抖 (Debouncing)：防抖函数会延迟执行事件处理函数，直到事件停止触发一段时间之后才执行。

1.创建preventReClick.js文件,内容如下

export default (app) => {
  app.directive("preventReClick", {
    mounted(el, binding) {
      el.addEventListener("click", () => {
        if (!el.disabled) {
          el.disabled = true;
          setTimeout(() => {
            el.disabled = false;
          }, binding.value || 1000);
        }
      });
    },
  });
};

2.在main.js中引用,自定义指令

import preventReClick from "./utils/preventReClick.js"

app.use(preventReClick)

3.在前端使用

在前端页面有需要节流的地方直接使用v-preventReClick即可

<el-button size="mini" type="primary" @click="enterDialogEvent" v-preventReClick>提交</el-button>