关于javascript中限定时间内防止按钮重复点击的思路详解
发布于 2017-04-03 23:53:25 | 275 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇关于javascript中限定时间内防止按钮重复点击的思路详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前面的话
有一天心血来潮，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>
思路二
另一个思路是获取并记录时间，当再次点击时，时间间隔大于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中限定时间内防止按钮重复点击的思路详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phperz。
推荐阅读
最新资讯