js 3秒内防止重复点击(提交)

最新推荐文章于 2024-05-03 17:05:11 发布
最新推荐文章于 2024-05-03 17:05:11 发布
阅读量6.9k 收藏 5
点赞数 2
分类专栏： js 文章标签： 防止重复点击
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wx13227855087/article/details/82664118
版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>js禁止重复点击/提交</title>
<script src="../bootstrap/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/jquery.jedate.js"></script>
<script type="text/javascript">
    var checkClick = false;  
    function checkClick () {  
        NoClick();
    } 
    function NoClick(){
        if (checkClick == true) {  
            alert("提交中...");  
            return false;  
        }  
        checkClick = true;  
    
        setTimeout(function() {  
            checkClick = false;  
        }, 3000);  
        return true;  
    }
</script>
</head>
<body>
    <input value="防止重复点击" type="button"  οnclick="return checkClick ();">  
</body>
</html>

3秒内重复点击按钮效果如下：

*WILL*
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript防止表单重复提交代码，指定时间内禁止重复点击.zip
08-30
最近项目在做一个登录页的时候，为了避免用户的多次重复点击登录按钮发送请求，所以我在点击了按钮发送请求后，将设置按钮变灰并禁用，倒计时一段时间后又可重复点击，具体实现如下，有需要的小伙伴可以参考一下。
简单 js 实现防止重复点击
ZhuangWei的博客
11-24 2986
防止重复点击：  定义一个clickThrottle.js文件 /* 防止重复点击 */ let clickTimer = 0 function clickThrottle(interval = 3000) { let now = +new Date(); // 获取当前时间的时间戳 let timer = clickTimer; // 记录触发事件的事件戳 if (now - timer < interval) { // 如果当前时间 - 触发事件时的事件 &
2024年网安最新【安全】Java幂等性校验解决重复点击（6种实现方式）_幂等校验
最新发布
2401_84239625的博客
05-03 997
幂等是一个数学与计算机科学概念，英文 idempotent [aɪˈdempətənt]。。比如 求绝对值 的函数，就是幂等的，abs(x) = abs(abs(x))。计算机科学中，幂等表示一次和多次请求某一个资源应该具有同样的作用。满足幂等条件的性能叫做幂等性。
js限制按钮几秒后可以点击
dabao87的博客
12-21 6240
公司最近出了一个抽奖活动，由于加载页面有一定的时间，所以就做了刚进页面3秒后才能点击按钮去抽奖，点击一次按钮后7秒后才能再次点击 ，下面直接上代码 window.onload = function() { var delayTime = ""; //定义delayTime var fun = function Click(){ clearTimeout(onl...
前端javascript防止重复触发的简单实现
步凡的博客
10-18 559
步凡的头像 步凡 lv-12021年10月18日 阅读 7 · 编辑前端防止重复触发的简单实现现在很多方法都是用settimeout延迟实现搞了个类似主键的简单逻辑 only_one(key,time){ if(key&&time){ let newtime = Date.now() + time; if(this[key] > Date.now()){ //重新计时，如果重新计时剩余秒数永远是time/1000 this[key] = newtime; this.$m
js节流与防抖
weixin_45799371的博客
08-12 195
手写函数节流与防抖
JS实现禁止短时间内连续触发事件
weixin_30785593的博客
07-18 1103
设置定时器，每次进入函数时先清空定时器，然后在执行 let c =null; let dom = document.querySelector('#me'); dom.addEventListener('click',function(){ clearTimeout(c); c = setTimeout(function(){ console...
js防止表单重复提交实现代码
10-27
尽管客户端的预防措施能提供一定程度的保护，但最可靠的防止重复提交的方式还是在服务器端进行验证。服务器可以检查请求是否是重复的，例如通过检查数据库中是否存在相同的记录，或者使用事务管理来确保一次性的...
解决vue 按钮多次点击重复提交数据问题
08-27
"解决 Vue 按钮多次点击重复提交数据问题" 在 Vue 项目中，按钮多次点击重复提交数据问题是一个常见的问题，本文将通过实例结合的形式详细介绍解决该问题的方法。 问题描述 在 Vue 项目中，我们经常会遇到按钮多...
JS Ajax请求如何防止重复提交
10-22
主要介绍了JS Ajax请求如何防止重复提交的相关资料，通过覆盖掉$.ajax而达到防止重复提交的问题，实现代码简单，需要的朋友可以参考下
js防止表单重复提交的两种方法
10-26
第一种：用flag标识，下面的代码设置checkSubmitFlg标志；第二种：在onsubmit事件中设置，在第一次提交后使提交按钮失效，感兴趣的朋友可以了解下
php 3秒不重复提交,php 防止表单重复提交两种实现方法
weixin_32420193的博客
03-09 457
php 防止表单重复提交由于网络原因，经常出来点了提交按钮，网页没有反应，而进行再次点击。这样就导致后台收到两次提交，从而进行两次处理，本文章向大家介绍php 防止表单重复提交的几种方法1、前端解决方法一：可以通过前端来解决。当用户点了提交按钮之后，先使用js进行有效性判断，没问题后，将提交按钮”禁用“掉。然后再提交！方法二：使用ajax提交表单。点了提交按钮后，禁用提将按钮，或者设置一个状态值，...
js禁止点击按钮（点击无效）
weixin_44944193的博客
11-07 1万+
1.设置按钮不可点击 document.getElementById("bt1").disabled=true; 2.设置按钮可点击 document.getElementById("bt1").disabled=false; 3.jquery中设置按钮可点击与不可点击，默认是可点击的 (1)设置按钮不可点击 $("#bt1").attr("disabled",true); ...
弹性下拉菜单
qq_39896349的博客
01-24 300
参数 a：按钮、 ul 下拉菜单ul li：下拉菜单li （文中假设li高度为34px） dom结构：a ul并列 function pull_down(a,ul,li){ let timer = null; a.on({ mouseenter: function () { console.log("a-mouseenter");
html 防止js重复点击,JS实现防止按钮在短时间内被多次点击的方法
weixin_42554151的博客
06-17 2531
如果一个按钮可以在短时间内多次点击，那么有可能会被用户恶意点击，为防止这种情况，可以设定一定时间内只能点击一次，其他时间禁止点击按钮。代码如下：Js定时事件/*timeId=window.setTimeout("method()",1000); window.clearTimeout(timeId);定时执行timeId=window.setInterval("method()",1000); w...
javascript中防止重复点击、防止点击过快实用方法
热门推荐
jiangwei1994的博客
06-22 5万+
防止重复点击可以添加一个开关,让这个开关默认为true，第一次点击将其变为false,点击事件的执行需要判断这个开关是否为true，为true执行,false不执行。例子如下：  var isclick= true; function click(){ if(isclick){ flag = false;             //下面添加需要...
前端防止用户重复提交-js
05-24
前端可以通过以下几种方式防止用户重复提交： 1. 禁用提交按钮：在表单被提交后，立即禁用提交按钮，防止用户多次点击提交按钮。可以通过以下代码实现： ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); document.querySelector('button[type="submit"]').setAttribute('disabled', true); // ... }); ``` 2. 显示加载动画：在表单被提交后，显示一个加载动画来提示用户正在处理请求，防止用户多次点击提交按钮。可以通过以下代码实现： ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); document.querySelector('.loading').style.display = 'block'; // ... }); ``` 3. 防抖函数：在用户频繁点击提交按钮时，使用防抖函数延迟请求的发送。可以通过以下代码实现： ```javascript function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); } } const submitForm = debounce(function() { document.querySelector('form').submit(); }, 1000); document.querySelector('button[type="submit"]').addEventListener('click', function(event) { event.preventDefault(); submitForm(); }); ``` 以上是前端防止用户重复提交的一些方法，但这些方法只是针对前端的处理，为了保证数据的安全和正确性，后端也需要进行相应的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值