javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js防止重复提交

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

作者：~风清扬~

防止JavaScript重复点击和提交需结合前端禁用按钮、节流和标志位,这篇文章主要介绍了JavaScript防止重复提交的三种解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

防止 javascript 重复点击和提交的关键方法有三种：1. 禁用按钮法，点击后立即禁用按钮并更改文本提示，请求完成后恢复；2. 节流函数（throttle），限制函数在设定时间间隔内仅执行一次，适用于非即时响应场景；3. 使用标志位，通过变量标记操作状态以阻止重复触发。此外，前端可通过按钮文本变化或加载动画提升用户提示体验，而后端则可通过 token 机制、悲观锁/乐观锁及幂等性设计确保数据一致性与安全性。选择方案应根据具体场景决定，前端与后端结合使用可提供更全面的防护。

防止 JavaScript 重复点击和提交，关键在于控制用户行为，避免短时间内多次触发相同操作。这不仅仅是用户体验的问题，更关系到数据一致性和服务器压力。

解决方案

1.禁用按钮法：

这是最直接也最常用的方法。点击按钮后，立即禁用它，防止用户再次点击。待请求完成后，再重新启用按钮。

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

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

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

这种方法的优点是简单易懂，缺点是用户体验可能略差，因为按钮禁用期间无法进行任何操作。可以结合按钮文本的变化来改善用户体验。

2.节流函数（Throttle）：

使用节流函数可以限制函数在一定时间内只能执行一次。这适用于那些不需要立即响应的场景，比如搜索框的输入事件。 

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);

节流函数的核心在于时间控制，确保函数在规定的时间间隔内只执行一次。

3.使用标志位：

定义一个变量来标记是否正在进行操作。如果正在进行操作，则忽略后续的点击事件

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);
});

 在 CSS 中定义 .loading 类，例如：

.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);
  }
}

除了前端，后端如何防止重复提交？

前端的防止重复提交只能解决一部分问题，更可靠的方案是在后端进行验证。常见的后端防止重复提交的方法包括：

后端防止重复提交是更可靠的方案，可以有效地防止恶意攻击和网络延迟等问题导致的重复提交。

总结

到此这篇关于JavaScript防止重复提交的三种解决方案的文章就介绍到这了,更多相关js防止重复提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文