页面防止快速点击提交按钮，频繁提交的问题

最新推荐文章于 2022-06-28 16:20:14 发布

菜鸟凯一枚

最新推荐文章于 2022-06-28 16:20:14 发布

阅读量883

点赞数

分类专栏： Vue前端文章标签：页面防止快速点击提交按钮，频繁提交的问题

本文链接：https://blog.youkuaiyun.com/qq_37782076/article/details/86487966

版权

Vue前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在前端开发中防止用户重复点击按钮的方法，通过定义一个公共函数duplicateClick来控制按钮点击频率，确保在设定延迟时间内不会重复触发同一操作，有效避免了因用户误操作导致的数据重复提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义的公共方法

// 阻止频繁点击
export function duplicateClick(context, delay = 500) {
  if (context.clickTag !== 0) {
    return Promise.reject();
  }
  context.clickTag += 1;
  if (context.clickTimer) {
    clearTimeout(context.clickTimer);
  }
  context.clickTimer = setTimeout(() => { context.clickTag = 0; }, delay);
  return Promise.resolve();
}

调用的页面

import引入上面的方法变量

在data里面一定要定义clickTag变量，否则该方法不生效。

在提交按钮submit方法里面调用防止频繁提交的方法

<script>

import { duplicateClick } from '@/utils/index';

export default {
  
  data() {
    return {
      clickTag: 0,
    };
  },
  methods: {
    submit() {
      // 防止快速点击，频繁提交
      duplicateClick(this).then(() => {
        this.saveSubmit();
      }).catch(() => {});
    },
  }

};
</script>