防抖按钮指令

最新推荐文章于 2024-03-05 12:17:57 发布

代号:12138的小贺

最新推荐文章于 2024-03-05 12:17:57 发布

阅读量372

点赞数 1

分类专栏：前端文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_45992843/article/details/126145850

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个防止在短时间内重复点击按钮的问题解决方案，通过实现一个防抖函数，确保在规定的时间内只能触发一次点击事件。示例展示了如何在Vue中应用此防抖函数，用于限制表单提交按钮的点击次数，避免新增重复数据。

摘要由CSDN通过智能技术生成

/**
 * @desc
 * 背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。
 * 需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。
 * 思路：
 * 1. 定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。
 * 2. 将时间绑定在 click 方法上。
 */
const debounceFn = {
  inserted: function(el, binding) {
    let timer;
    // enter按键事件
    el.addEventListener('keyup', () => {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        binding.value();
      }, 1000);
    });
    // 点击事件
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        binding.value();
      }, 1000);
    });
  }
};

export default {
  install(Vue, { name = 'debounce' } = {}) {
    Vue.directive(name, debounceFn);
  }
};




使用：
<template>
  <el-button type="primary" v-debounce="onSubmit">防抖动指令-登录</el-button>
</template>
<script>
export default {
  methods: {
    onSubmit(event){}
  }
}
</script>