uni-app:防止重复提交

一、添加辅助函数

utils/debounce.js

通过时间方式盘点是否重复提交，是否超时提交

javascript 复制代码

// utils/debounce.js

let lastClickTime = 0;
let submitting = false;
let submitTimer = null; // 添加超时计时器

/**
 * 防重复提交检查
 * @param {number} delay - 点击间隔时间，默认2s
 * @param {number} timeout - 超时时间，默认6s
 * @returns {boolean} 是否允许执行
 */
export function checkSubmit(delay = 2000, timeout = 6000) {
  const now = Date.now();
  
  // 如果正在提交中
  if (submitting) {
    // 检查是否超时
    if (submitTimer && now - lastClickTime > timeout) {
      resetAll(); // 超时自动重置
      console.warn('提交操作超时，已自动重置状态');
    } else {
      uni.showToast({
        title: '正在提交中，请稍候',
        icon: 'none',
        duration: 1500
      });
      return false;
    }
  }
  
  // 如果点击太快
  if (now - lastClickTime < delay) {
    uni.showToast({
      title: '操作太快了，请稍后再试',
      icon: 'none',
      duration: 1500
    });
    return false;
  }
  
  lastClickTime = now;
  submitting = true;
  
  // 设置超时自动重置
  if (submitTimer) clearTimeout(submitTimer);
  submitTimer = setTimeout(() => {
    if (submitting) {
      resetAll();
      console.warn('提交操作超时，已自动重置状态');
      uni.showToast({
        title: '操作超时，请重试',
        icon: 'none',
        duration: 1500
      });
    }
  }, timeout);
  
  return true;
}

/**
 * 提交完成，重置状态
 */
export function finishSubmit() {
  submitting = false;
  if (submitTimer) {
    clearTimeout(submitTimer);
    submitTimer = null;
  }
}

/**
 * 重置所有状态
 */
export function resetAll() {
  lastClickTime = 0;
  submitting = false;
  if (submitTimer) {
    clearTimeout(submitTimer);
    submitTimer = null;
  }
}

二、使用方式

javascript 复制代码

// 防重复点击检查
if (!checkSubmit(2000)) {
	return;
} 

//成功提交/失败
finishSubmit();  // 重置提交状态

开始提交时，加入防重复检查

if (!checkSubmit()) {

return;

}

提交成功/失败，使用提交重置

finishSubmit();

三、完整实例

html 复制代码

<template>
  <button @click="submit">提交按钮</button>
</template>

<script>
import { checkSubmit, finishSubmit } from '@/utils/debounce.js';

export default {
  methods: {
    submit() {
      // 1. 防重复检查
      if (!checkSubmit()) {
        return;
      }
      
      // 2. 发送请求（同步方式）
      uni.request({
        url: 'https://api.example.com/submit',
        method: 'POST',
        data: {
          name: '张三',
          age: 25
        },
        success: (res) => {
          // 3. 请求成功
          if (res.statusCode === 200) {
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            });
          }
          
          // 4. 重置状态
          finishSubmit();
        },
        fail: (error) => {
          // 5. 请求失败
          console.error('请求失败:', error);
          uni.showToast({
            title: '提交失败',
            icon: 'error'
          });
          
          // 6. 重置状态
          finishSubmit();
        }
        // 注意：这里没有 complete，因为我们要在 success/fail 中分别重置
      });
    }
  }
}
</script>