JS阻止事件被频繁点击

最新推荐文章于 2024-03-21 11:28:52 发布
最新推荐文章于 2024-03-21 11:28:52 发布
阅读量4.6k 收藏 2
点赞数 1
分类专栏： JavaScript/jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dlshbn/article/details/50930393
版权 
<body>

<div οnclick="checkClickInterval("refresh")">刷新</div>

<script>
var repeatObj = {repeatTemp:[]}

function checkClickInterval(refresh,time){//如果指定time则time*1000，否则默认间隔时间time是30s  

	time = time ? time*1000 : 30000;
	var newTime = new Date().getTime();//获取每次点击时的系统时间:毫秒数
	if(!repeatObj[refresh]){
		repeatObj[refresh] = newTime;
		return true;//可以点击
	}else{
		var t = time - (newTime - repeatObj[refresh]);
		t = parseInt(t);
		if(t<=0){
			repeatObj[refresh] = newTime;
			return true;//可以点击
		}else{
			alert("不要频繁点击，距离下次点击还有："+t+"秒");
			return false;
		}
	}

}
function refresh(){

     if(checkClickInterval("refresh")){
         //执行动作。。。。
     }

}


</script>

<body>


勒布朗赵四
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript - 你知道用户快速连续点击，造成多次提交数据该如何解决吗
xingyu_qie的专栏
04-07 136
点击按钮提交数据，在项目开发中已经是一个再普通不过的需求功能了，它是那么普通，甚至在需求文档中经常会被一笔带过。但就是这样一个平凡的功能，bug列表里还是时常会有它的身影。伴随的问题就是正常情况下，单次点击没有问题，但如果被快速多次点击，就会发送多次请求，造成多次提交数据的问题。那么都有哪些办法可以解决这个问题呢，我们一起来看一下。
js防止事件触发过于频繁
寂寥人生
07-06 636
var onOff = true document.onclick = function () { // onOff === true时才运行函数 if (onOff) { onOff = false // 把onOff值改为false,点击间隔过短就无法运行函数 console.log('输出') setTimeout(function() { onOff = true // 1秒钟后onOff等于true .
js遭遇了事件多次触发问题
jacky_zh的专栏
10-26 1088
         最近和同事2个人，1个月搞出来个项目管理系统，好在是公司同事内部使用。项目是搞出来了，bug也很多。这真是诠释了 我真是在写bug啊。不过马上奔40的高龄了，能弄出个东西来，自己也蛮开心的。毕竟年纪越来越大，感觉自己生产的软件 数量肯定也是会越来越少了。毕竟写出来的软件，就像自己的孩子一样。要倾注一番心血的。不知道自己还有多少心血可以流了。         我老婆老说，我们...
解析JS绑定事件重复触发问题
michaelli918的博客
06-12 8990
一、什么问题 当前端开发过程中，经常用到事件，随着业务代码这一块的复杂化，在事件和多次注册和调用时，如果处理不好就会出现同一事件触发多次的问题。今天我们就聊一聊这个问题 二、事例 下面这段代码是一个简单的例子，页面上一有一个安钮。当点击’安钮‘时创建一个button为 test button代码插入area中。接着点击该button，console.log一个东西。如果下代码： h
JS连续多次点击事件
sakura的博客
11-16 1015
JS连续多次点击事件
js防止按钮重复点击
ddf__的博客
02-12 446
【代码】js防止按钮重复点击。
JS鼠标3次点击事件实现代码及扩展思路
10-19
在这个场景中，我们关注的是如何实现一个JS鼠标3次点击事件，并探讨一些可能的扩展思路。首先，我们要了解JavaScript事件处理的基本概念。 在JavaScript中，事件处理通常分为DOM0级、DOM2级和现代标准（如事件监听...
解决layer.confirm快速点击会重复触发事件的问题
10-16
在JavaScript编程中，有时我们可能会遇到用户界面中的某些交互元素，如`layer.confirm`弹窗，在用户快速点击时，导致事件被重复触发的问题。这在实际应用中可能会引发一系列问题，比如频繁向后端发送请求，进而导致...
所有浏览器点击任意链接跳出随机页面JS
09-25
例如，使用`addEventListener`方法可以为所有链接添加一个点击事件处理函数： ```javascript document.querySelectorAll('a').forEach(link => { link.addEventListener('click', function(event) { // 阻止默认...
关于javascript中限定时间内防止按钮重复点击的思路详解
10-21
这种方法的核心思想是，在用户点击按钮后，立即解除按钮的点击事件绑定，然后在设定的时间（如1秒）后重新绑定该事件。以下是一个简单的示例： ```html <button id="btn">0 var btn = document.getElementById('...
javascript经典特效---测试鼠标点击速度.rar
01-04
在这个“测试鼠标点击速度”的场景中，我们需要关注的是`click`事件，即鼠标点击事件。当用户点击页面上的某个元素时，会触发这个事件。 要监听并响应`click`事件，我们可以使用`addEventListener`方法。这是一个在...
JS防止用户多次提交的简单代码
10-27
介绍了JS防止用户多次提交的简单代码，有需要的朋友可以参考一下
一种防止多次点击按钮的JavaScript方法
yzy85的专栏
09-23 1242
【代码】一种防止多次点击按钮的JavaScript方法。
连续点击按钮触发函数
最新发布
qq_45587547的博客
03-21 271
有一个很重要按钮，点击它可能出现可怕的事情，但有时又不得不点击，这时你就可以给这个按钮添加一些小bug，让1秒内连续点击5次才能触发它，是不是很神奇，这个小功能貌似没有一点用。
简单 js 实现防止重复点击
qq_36519327的博客
07-13 4672
js 实现防止重复点击
JS 使用闭包函数 实现 当用户在3秒之内连续点击一个按钮，事件函数只执行一次
weixin_68166404的博客
08-01 1659
JS 使用闭包函数 实现 当用户在3秒之内连续点击一个按钮，事件函数只执行一次
防止按钮重复点击的js实现
李大爷学前端
06-29 1万+
在网页开发过程中经常遇到防止
初学Js-一个按钮多次点击触发不同事件-事件编程
热门推荐
大老虎Picky的博客
05-24 1万+
最简单的一个事件：点一下按钮出现一句话，点第二下出现不同的话，等到点击第四下时，回到了第一次点击发生的事件，进入一个循环。可以用这个小程序衍生更多的事件，等后面写的更多一点试着写一下吧！&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;大尾巴狼的需求1&lt;/title&gt; &lt;/head&gt; &lt;b...
Js点击事件执行多次问题解决
Smile__Mo的博客
07-11 7260
当你的点击事件是套在一个事件中的时候，外面的事件执行里面的点击事件会保存当前，如果外面的事件执行了两次当你点击的时候，点击事件就会执行两次。所以要对点击事件进行解绑，防止他存贮之前的事件。具体方法：原绑定方法： 复制代码代码如下:$("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法； 解决办法更改绑定方法为...
js怎么阻止事件被重复绑定
06-03
在JavaScript中，可以使用`removeEventListener()`方法来阻止事件被重复绑定。这个方法可以从元素中移除之前绑定的事件处理函数，从而防止事件被重复触发。 举个例子，假设我们有一个按钮元素，我们想要在点击该按钮时执行一个函数。如果我们不想让这个事件被重复绑定，我们可以先使用`removeEventListener()`方法来移除之前绑定的事件处理函数，然后再将新的事件处理函数绑定到该元素上，代码如下： ```javascript const button = document.querySelector('#myButton'); function handleClick() { console.log('Button clicked'); } // 绑定事件处理函数 button.addEventListener('click', handleClick); // 移除之前绑定的事件处理函数 button.removeEventListener('click', handleClick); // 再次绑定事件处理函数，这样就可以避免事件被重复绑定 button.addEventListener('click', handleClick); ``` 需要注意的是，在移除事件处理函数时，必须使用与绑定时相同的函数。否则，即使两个函数的代码相同，它们也被视为不同的函数，`removeEventListener()`方法也无法正常工作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值