手机
当前位置:查字典教程网 >编程开发 >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中getUTCMinutes()方法的使用详解

javascript中一些util方法汇总

浅谈javascript事件取消和阻止冒泡

JavaScript里实用的原生API汇总

JavaScript中String.match()方法的使用详解

javascript实现日期按月份加减

JavaScript的document和window对象详解

Javascript随机显示图片的源代码

精品推荐
分类导航