关于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制作手机端自适应缩放显示
Jun 11 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
js实现3d悬浮效果
Feb 16 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
详解JavaScript中的坐标和距离
May 27 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
javascript实现点击产生随机图形
Jan 25 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中操作Excel实例代码
2010/04/29 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php递归创建目录的方法
2015/02/02 PHP
php中序列化与反序列化详解
2017/02/13 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PDO::exec讲解
2019/01/28 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
js 上传图片预览问题
2010/12/06 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
React实现全选功能
2020/08/25 Javascript
python实现多线程的两种方式
2016/05/22 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python中使用print输出中文的方法
2018/07/16 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python时间time模块处理大全
2020/10/25 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
团员个人的自我评价
2013/12/02 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript