关于javascript中限定时间内防止按钮重复点击的思路
前面的话
有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮。果不其然,ip当时就被禁用了。后来,重启自己的路由器,重新获取ip才可以访问博客园主页。那么,设置一个限定时间内(比如1秒)防止按钮被重复点击的方法会不会更好一点呢?
思路一
最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数
<button id="btn">0</button>
<script>
btn.onclick = function add(){
btn.innerHTML = Number(btn.innerHTML) + 1;
btn.onclick = null;
clearTimeout(timer);
var timer = setTimeout(function(){
btn.onclick = add;
},1000);
}
</script>
思路二
另一个思路是获取并记录时间,当再次点击时,时间间隔大于1s时才有效
<button id="btn">0</button>
<script>
btn.onclick = (function(){
var last = Date.now();
return function(){
var now = Date.now();
if((now - last)>1000){
btn.innerHTML= Number(btn.innerHTML) + 1;
}
last = now;
}
})();
</script>
如果还有其他思路,欢迎交流
关于javascript中限定时间内防止按钮重复点击的思路的更多相关文章
- 防止按钮重复点击的思路(js篇)
最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数 <button id=</button> <script> btn.onclick = fun ...
- 在Activity中响应ListView内部按钮的点击事件
最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在A ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法!!!
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法
转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...
- Andorid-解决View重复点击的思路
Andorid-解决View重复点击的思路 转 https://www.jianshu.com/p/10d400a296fe 最近遇到一道面试题,题目是在App开发中,如何防止多次点击支付或者多次点击 ...
- 关于Android避免按钮重复点击事件
最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...
- React Native(十一)——按钮重复点击事件的处理
最初开始做后台管理系统的时候,就曾遇到过这样一种场景:"快速点击确认按钮,就会对此触发确认事件,导致多次请求数据库":于是最终我们得当的通过处理那个确认button,解决了上述问题 ...
- 转载:Github项目解析(七)-->防止按钮重复点击
不错的东西,记录下... http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qq_23547831/article/deta ...
- 按钮重复点击问题 UIbutton
.h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...
随机推荐
- ACM: ICPC/CCPC Sudoku DFS - 数独
Sudoku Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/65535K (Java/Other) Total Submis ...
- Easyui Ajax验证Form表单。。。
今天做项目用到easyui Ajax验证表单.本想自定义一个easyui的验证,查资料发现easyui 自带了一个通用的验证!见以下下截图. 后台返回值 true验证通过,返回false验证失 ...
- Shell脚本基础
特别变量: $# 传递到脚本的参数个数$* 以一个单字符串显示所有向脚本传递的参数$$ 脚本运行的当前进程ID号$! 后台运行的最后一个进程的ID号$@ 与$#相同,但是使用时加引号,并在引号中返回每 ...
- MYSQL的安装
1.将mysql的安装文件放入虚拟机 2.搭建yum库 3.依次安装mysql的5个文件 最后一个server需要的依赖太多,所以用yum进行安装. 6.进行mysql的重置 mysql_instal ...
- 关于MySQL 的LEFT JOIN ON的问题
今天在查询视图时,遇到了一个问题. 因为mysq不能嵌套select的子查询.所以我把子查询建成了视图b,主查询通过left join on关联视图b ,形成视图a. 由于视图b中也有left joi ...
- chm文件索引丢失和不能搜索
regsvr32 hhctrl.ocx regsvr32 itss.dll regsvr32 itircl.dll
- 2016huasacm暑假集训训练五 J - Max Sum
题目链接:http://acm.hust.edu.cn/vjudge/contest/126708#problem/J 题意:求一段子的连续最大和,只要每个数都大于0 那么就会一直增加,所以只要和0 ...
- asp.net 基礎部分一
过程: 客户端像服务器发送一个请求,iis服务器接收到请求的数据,并且将数据交给c#程序进行处理,并且对数据库进行操作,并且将处理到的结果响应给浏览器客户端 过程2:第一次浏览器请求,后端应该发一个表 ...
- java的英文词频算法
java实现的英文词频算法,通常是采用单词树来实现的.使用java实现词频统计,为了统计词汇出现频率,最简单的做法是再建立一个map,其中,key是单词,value代表次数.将文章从头读到尾,读到一个 ...
- ex2-注释和井号
代码: print("I could have code like this.") # and the commnt after is ignored.# You can also ...