关于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 ...
随机推荐
- HTTP 使用期及新鲜度算法
使用期算法: /* * age_value 当代理服务器用自己的头部去响应请求时,Age标明实体产生到现在多长时间了. * date_value HTTP 服务器应答中的Date字段 原始服务器 * ...
- 2分钟 sublime设置自动行尾添加分号并换行:
18:03 2016/4/162分钟 sublime设置自动行尾添加分号并换行:注意:宏文件路径要用反斜杠/,2个\\会提示无法打开宏文件.不需要绝对路径很简单利用宏定义:1.录制宏:由于是录制动作宏 ...
- BZOJ‘s Usaco 奶牛题集锦
1230 线段树 1231 状压DP 1232 最小生成树 1527 贪心 1600 打表找规律 1601 最小生成树 1602 prime 1606 DP 1607 筛法 1609 DP 1610 ...
- knockoutjs扩展与使用
原来考虑使用avalon2.0 经过一周的试验,能力不够,用不起来.最终使用了knockout-3.4.js <!DOCTYPE html> <html> <head&g ...
- View的弹性滑动
View的弹性滑动 实现弹性滑动的思想:将一次大的滑动分成若干次小的滑动并在一个时间段内完成,具体的实现方式有很多,如通过Scroller.Handler#postDelayed以及Thread#sl ...
- 7_nodejs angularjs
webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b ...
- elasticsearch完全匹配
$params = array( "body" => array( "query" => array( "filtered" = ...
- sublime text 插件(前端自用)
一.软件安装 ST中文论坛:http://sublimetext.iaixue.com/ 或者 http://sublimetext.iaixue.com/dl/#sublime_text_3103 ...
- 使用Python中PIL图形库进行截屏
目的:通过使用Python的一个图形库PIL(Python Image Library)对屏幕进行截图 步骤: 1.下载PIL(路径)并安装 2.新建文件“截屏.py”,右键Edit with IDL ...
- dns解析慢 修改的参数
情况: ping域名时反应速度慢,ping ip却很正常 方法一:禁用ipv6 /etc/hosts中注释ipv6相关的 vim /etc/sysconfig/networks NETWORKING_ ...