关于javascript中限定时间内防止按钮重复点击的思路详解


Posted in Javascript onAugust 16, 2016

前面的话

有一天心血来潮,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>

关于javascript中限定时间内防止按钮重复点击的思路详解

思路二  

另一个思路是获取并记录时间,当再次点击时,时间间隔大于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中限定时间内防止按钮重复点击的思路详解

以上这篇关于javascript中限定时间内防止按钮重复点击的思路详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
总结Node.js中的一些错误类型
Aug 15 #Javascript
自动化测试读写64位操作系统的注册表
Aug 15 #Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 #Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 #Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 #Javascript
Web安全测试之XSS实例讲解
Aug 15 #Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 #Javascript
You might like
php仿ZOL分页类代码
2008/10/02 PHP
PHP函数常用用法小结
2010/02/08 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
两款万能的php分页类
2015/11/12 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php通过各种函数判断0和空
2020/07/04 PHP
jQuery 表格插件整理
2010/04/27 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 常用的基础函数
2018/07/10 Python
pygame实现弹球游戏
2020/04/14 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
机电专业体育教师求职信
2013/09/21 职场文书
土木工程应届生求职信
2013/10/31 职场文书
机电一体化自荐信
2013/12/10 职场文书
表演方阵解说词
2014/02/08 职场文书
目标责任书范文
2014/04/14 职场文书
中学生评语大全
2014/04/18 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
国博复兴之路观后感
2015/06/02 职场文书