js 通用防重复提交方法

王家五哥

已于 2023-06-15 09:50:52 修改

阅读量612

点赞数 1

文章标签： java powerpoint javascript

于 2023-06-15 09:43:44 首次发布

本文链接：https://blog.csdn.net/qq_36521848/article/details/131221198

版权

该文章介绍了一种防止用户因手快或网络问题导致重复提交的解决方案。通过在点击提交时禁用按钮，并设置3秒后自动解除禁用的JavaScript函数，可以有效地避免多次提交的问题。示例代码展示了如何实现这一功能。

摘要由CSDN通过智能技术生成

简介：

有时候浏览器用户提交，手比较快，或者网络卡顿，容易提交多次

解决原理：

用户点击提交，自动禁用按钮3秒钟，3秒后自动解除禁用

使用效果：

核心代码：

/**
 *  通用防止重复提交方法
 * @param buttonId
 */
function disableButton(buttonId) {
	debugger;
	var button = document.getElementById(buttonId);
	if (button) {
		button.disabled = true; // 禁用按钮
		setTimeout(function() {
			button.disabled = false; // 3秒后启用按钮
		}, 3000);
	}
}

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>禁用按钮测试，3秒后自动解禁</title>
	</head>
	<body>
		<div style="text-align: center;padding: 200px;">
			<input id="test" onclick="disableButton('test')" type="button" value="提交">
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
	<script>
		/**
		 *  通用防止重复提交方法
		 * @param buttonId
		 */
		function disableButton(buttonId) {
			debugger;
			var button = document.getElementById(buttonId);
			if (button) {
				button.disabled = true; // 禁用按钮
				setTimeout(function() {
					button.disabled = false; // 3秒后启用按钮
				}, 3000);
			}
		}
	</script>
</html>