关于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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JS常用函数使用指南
2014/11/23 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python2.7安装图文教程
2018/03/13 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
python numpy存取文件的方式
2020/04/01 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
个人实用的自我评价范文
2013/11/23 职场文书
应征英语教师求职信
2013/11/27 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
离婚纠纷代理词
2015/05/23 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
篮球拉拉队口号
2015/12/25 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL