JavaScript防止重复提交的三种解决方案

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  button.disabled = true;
  button.textContent = '处理中...'; // 可选：更改按钮文本提示用户

  // 模拟一个异步请求
  setTimeout(() => {
    // 请求成功或失败后的处理
    button.disabled = false;
    button.textContent = '提交'; // 恢复按钮文本
  }, 2000);
});

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const now = Date.now();
    const timeSinceLastExec = now - lastExecTime;

    if (!timeoutId) {
      if (timeSinceLastExec >= delay) {
        func.apply(this, args);
        lastExecTime = now;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(this, args);
          lastExecTime = Date.now();
          timeoutId = null;
        }, delay - timeSinceLastExec);
      }
    }
  };
}

const myFunc = () => {
  console.log("函数执行");
};

const throttledFunc = throttle(myFunc, 1000); // 1秒内只允许执行一次

// 多次调用 throttledFunc，但实际上只有在间隔超过 1 秒时才会执行
throttledFunc();
throttledFunc();
setTimeout(throttledFunc, 500);
setTimeout(throttledFunc, 1200);

let isSubmitting = false;

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认的表单提交

  if (isSubmitting) {
    console.log('正在提交，请稍候...');
    return;
  }

  isSubmitting = true;
  console.log('开始提交...');

  // 模拟一个异步提交
  setTimeout(() => {
    console.log('提交完成！');
    isSubmitting = false;
  }, 3000);
});

const button = document.getElementById('myButton');
const originalText = button.textContent;

button.addEventListener('click', function() {
  button.disabled = true;
  button.textContent = '处理中...'; // 更改按钮文本
  button.classList.add('loading'); // 添加一个 loading class，用于显示加载动画

  // 模拟一个异步请求
  setTimeout(() => {
    // 请求成功或失败后的处理
    button.disabled = false;
    button.textContent = originalText; // 恢复按钮文本
    button.classList.remove('loading'); // 移除 loading class
  }, 2000);
});

.loading {
  position: relative;
  padding-right: 25px; /* 为加载动画预留空间 */
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spin 1s linear infinite;
  transform: translateY(-50%);
}

@keyframes spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}