关于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 ...
随机推荐
- hdu3549还是网络流
最后一次训练模板(比较熟练了) 接下来训练网络流的建图 #include <cstdio> #define INF 2147483647 int n,m,ans,x,y,z,M,h,t,T ...
- MAC帧和IP数据报
- Python3.5 day4作业:对员工信息文件,实现增删改查操作。
需求: 1.可进行模糊查询,语法至少支持下面3种: 1.select name,age from staff_table where age > 22 2.select * from staf ...
- jenkins 登录提示无效
在自己电脑上的jenkins,有一段时间没有登录,jenkins 登录提示无效 <useSecurity>true</useSecurity> 修改成false <a ...
- js中this的用法
经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay
- Flask 重新认识
总是觉的学习东西有点猴子掰玉米的感觉.今天就重新再掰一次吧. Installation: 安装之前建议先安装virtualenv,这个东东是帮助你在多个python版本之间保持同步,不至于python ...
- 转:CentOS, 找不到dump命令:command not found
dump 功能说明:备份文件系统.语 法:dump [-cnu][-0123456789][-b <区块大小>][-B <区块数目>][-d <密度>][-f &l ...
- POJ1860 Currency Exchange(bellman-ford)
链接:http://poj.org/problem?id=1860 Currency Exchange Description Several currency exchange points are ...
- Node.js Ubuntu下安装
安装 Node.js 依次执行以下指令: sudo apt-get update sudo apt-get install -y python-software-properties python g ...
- ThinkPHP5 与 ThinkPHP3.* 之间的使用差异
因为研究TP5时间不是很长,暂时先列以下几处差异: 1.过去的单字母函数已完全被替换掉,如下: S=>cache,C=>config,M/D=>model,U=>url,I=& ...