关于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 相关文章推荐
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP安装问题
2006/10/09 PHP
PHP Socket 编程
2010/04/09 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
PHP7匿名类用法分析
2016/09/26 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
调试php程序的简单步骤
2019/10/04 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
关于js类的定义
2011/06/28 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
新学期红领巾广播稿
2014/01/14 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python