前面的话

  有一天心血来潮,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中限定时间内防止按钮重复点击的思路的更多相关文章

  1. 防止按钮重复点击的思路(js篇)

    最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数 <button id=</button> <script> btn.onclick = fun ...

  2. 在Activity中响应ListView内部按钮的点击事件

    最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在A ...

  3. 在Activity中响应ListView内部按钮的点击事件的两种方法!!!

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  4. 在Activity中响应ListView内部按钮的点击事件的两种方法

    转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...

  5. Andorid-解决View重复点击的思路

    Andorid-解决View重复点击的思路 转 https://www.jianshu.com/p/10d400a296fe 最近遇到一道面试题,题目是在App开发中,如何防止多次点击支付或者多次点击 ...

  6. 关于Android避免按钮重复点击事件

    最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...

  7. React Native(十一)——按钮重复点击事件的处理

    最初开始做后台管理系统的时候,就曾遇到过这样一种场景:"快速点击确认按钮,就会对此触发确认事件,导致多次请求数据库":于是最终我们得当的通过处理那个确认button,解决了上述问题 ...

  8. 转载:Github项目解析(七)-->防止按钮重复点击

    不错的东西,记录下... http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qq_23547831/article/deta ...

  9. 按钮重复点击问题 UIbutton

    .h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...

随机推荐

  1. bzoj1412最小割

    太羞耻了,m n写反了(主要是样例n m相等) 建图方法比较高(ji)端(chu),对于可以加栅栏的地方连上1的边,然后求最小割即可 为了让代码优(suo)美(duan),我写了一个check,避免多 ...

  2. Selenium_等待页面加载完毕

    隐式等待 WebDriver driver = new FirefoxDriver(); driver.get("www.baidu.com"); driver.manage(). ...

  3. ASP.NET导出Excel文件

    第一种最常见,并且最简单的方式,直接把GridView导出,导出格式为文本表格形式. protected void btnSaveExcel_Click(object sender, EventArg ...

  4. window.onload和$(document).ready(function(){})的区别

    前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...

  5. 整理react native的资料

    http://blog.csdn.net/jj120522/article/details/51900016  -----RN常见的错误 http://www.mamicode.com/info-de ...

  6. JavaScript固定宽高

    固定高宽:  <script type="text/javascript">         if (/Android (\d+\.\d+)/.test(navigat ...

  7. python中类的三种属性

    python中的类有三种属性:字段.方法.特性 字段又分为动态字段和静态字段 类 class Province: #静态字段 memo = 'listen' #动态字段 def __init__(se ...

  8. can't connect to mysql server on 'localhost'(10061)

    在linux下安装Navicat,想说在windows下试一试phpmyadmin之外的mysql图形工具. 显示下载安装了mysql workbench,链接成功.然后又弄了一下输入法重启,想说试一 ...

  9. Smart3D系列教程3之 《论照片三维重建中Smart3D几个工作模块的功能意义》

    [摘要] 近年来,倾斜摄影测量技术是国际测绘遥感领域近年发展起来的一项高新技术,利用照片进行三维重建成为一项关键性的技术.Smart3D软件,是照片三维重建主流软件之一,本文将就Smart3D建模软件 ...

  10. css 清除浮动 clear

    .clearfix{ zoom:1;/*对于老版本的IE进行兼容的设置*/ } .clearfix:after{ content:""; display:block; visibi ...