手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >关于javascript中限定时间内防止按钮重复点击的思路详解
关于javascript中限定时间内防止按钮重复点击的思路详解
摘要:前面的话有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮。果不其然,ip当时就被禁用了。后来,重启自己的路由器,重新...

前面的话

有一天心血来潮,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中限定时间内防止按钮重复点击的思路详解1

思路二

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

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

【关于javascript中限定时间内防止按钮重复点击的思路详解】相关文章:

Javascript 字符串模板的简单实现

javascript实现在网页任意处点左键弹出隐藏菜单的方法

javascript操作ul中li的方法

Javascript随机显示图片的源代码

JavaScript对W3C DOM模版的支持情况详解

删除javascript所创建子节点的方法

JavaScript里实用的原生API汇总

JavaScript的document和window对象详解

JavaScript中的small()方法使用详解

javascript事件冒泡和事件捕获详解

精品推荐
分类导航