js 通用防重复提交方法

男娘i 2023-10-12 15:56 33阅读 0赞

**简介：**

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

**解决原理：**

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

**使用效果：**

![9c2e4a1583a34a6a8f6c88d883466789.gif][]

**核心代码：**

/**
     *  通用防止重复提交方法
     * @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>

[9c2e4a1583a34a6a8f6c88d883466789.gif]: https://img-blog.csdnimg.cn/9c2e4a1583a34a6a8f6c88d883466789.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 springboot防重复提交

1、场景网页卡顿的时候，用户点击会造成重复操作\\n\\n如果前端不做防重复操作。会导致重复提交，重复下单等意外操作。而且对于系统资源来说也是一种浪费常规的解决方法是让前端

冷不防/ 2024年03月16日 21:14/ 0 赞/ 41 阅读

相关 js 通用防重复提交方法

简介：有时候浏览器用户提交，手比较快，或者网络卡顿，容易提交多次解决原理：用户点击提交，自动禁用按钮3秒钟，3秒后自动解除禁用使用效果： ![9c2e4a15

男娘i/ 2023年10月12日 15:56/ 0 赞/ 34 阅读

相关使用Redis实现接口防重复提交

阅读目录使用Redis实现接口防重复提交实现 1 在页面和redis中各存一份防重令牌 token 2、用

蔚落/ 2023年10月08日 18:27/ 0 赞/ 55 阅读

相关 Java实现防重复提交

欢迎访问我的个人博客:[www.ifueen.com][] 防重复提交的重要性？在业务开发中，为什么我们要去想办法解决重复提交这一问题发生？网上的概念很多：导致表单重

小鱼儿/ 2023年10月06日 12:21/ 0 赞/ 10 阅读

相关后台防重复提交问题

防重复提交的重要性？在业务开发中，为什么我们要去想办法解决重复提交这一问题发生？网上的概念很多：导致表单重复提交，造成数据重复，增加服务器负载，严重甚至会造成服务器宕机

蔚落/ 2022年11月04日 12:27/ 0 赞/ 161 阅读

相关 jquery ajax防重复提交

[巧用Ajax的beforeSend 提高用户体验][Ajax_beforeSend] jQuery是经常使用的一个开源js框架，其中的$.ajax请求中有一个befor

灰太狼/ 2022年06月14日 01:13/ 0 赞/ 204 阅读

相关客户端防表单重复提交和服务器端防重复提交

客户端防表单重复提交和服务器端防重复提交客户端防表单重复提交为了防止用户在客户端重复提交表单，要分析从客户端和服务端对重复提交的表单就行处理，首先是

以你之姓@/ 2022年06月09日 23:36/ 0 赞/ 262 阅读

相关表单提交AJAX防重复提交的办法总结

表单提交AJAX防重复提交的办法总结最近的维护公司的一个代理商平台的时候，客服人员一直反映说的统计信息的时候有重复数据，平台一直都很正常，这个功能是最近新进的一个

本是古典何须时尚/ 2022年06月01日 03:43/ 0 赞/ 264 阅读

相关 ng 防重复提交

转自：http://www.cnblogs.com/cynthia-wuqian/p/7019478.html [angula

深藏阁楼爱情的钟/ 2022年05月29日 02:17/ 0 赞/ 182 阅读

相关 Token防重复提交

<table> <tbody> <tr> <td><img alt="" height="475" src="https://img-blog.csdnimg

绝地灬酷狼/ 2022年02月28日 11:35/ 0 赞/ 243 阅读