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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37782076/article/details/86487966

定义的公共方法

// 阻止频繁点击
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>