当前位置：首页 > article >正文

vue3中的全局防抖节流指令

article 2024/9/20 0:46:56

适用场景，一般业务当中存在查询、新增、编辑等操作类型，使用防抖有效防止疯狂点击增加多条数据问题

// 定义全局自定义指令
app.directive("antiShake", {
  // 在元素的 attribute 或事件监听器被应用之前调用   
  created(el, binding,) {
    let cbFun: NodeJS.Timeout|null = null;
    el.addEventListener("click", (event:any) => {
      event && event.stopImmediatePropagation();
      if (!cbFun) {
        cbFun = setTimeout(() => {
          binding.value()
        }, 2000);
      } else {
        clearTimeout(cbFun);
        cbFun = setTimeout(() => {
          binding.value()
        }, 2000);
      }
    }, true)
  },
});


//节流函数
app.directive("throttle", {
  created(el, binding,) {
    let throtTime = binding.value;
    if (!throtTime) {
      throtTime = 2000
    }
    let cbFun: NodeJS.Timeout|null = null;
    el.addEventListener("click", (event:any) => {
      if (!cbFun) {
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throtTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true)
  },
});

页面使用方法

<template #footer>
          <span class="dialog-footer">
            <el-button type="warning" v-antiShake="add" @click="add()">确定</el-button>
          </span>
</template>