关于javascript中限定时间内防止按钮重复点击的思路

news/2024/7/5 13:12:59

前面的话

  有一天心血来潮,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>

 

  如果还有其他思路,欢迎交流


http://www.niftyadmin.cn/n/647670.html

相关文章

C语言159页练一练答案,国家计算机二级c语言历年真题及答案159页.doc

您所在位置&#xff1a;网站首页 > 海量文档&nbsp>&nbsp资格/认证考试&nbsp>&nbsp计算机等级考试国家计算机二级c语言历年真题及答案159页.doc160页本文档一共被下载&#xff1a;次,您可全文免费在线阅读后下载本文档。下载提示1.本站不保证该用户上…

值得深思(一)

006、这个世界是反应重于预测的世界&#xff0c;不要将任何一个事物看得比生活本身更重要&#xff0c;这样才不会迷失自我。 005、虚荣的准确定义是&#xff1a;刻意活在别人好评里的人。 004、一个人采取怎样的行动&#xff0c;在别人眼里会有不同的理解。但是&#xff0c;对于…

linux watch源码在哪里,Linux的watch命令没有脚本的工作

我做一个脚本定期监测到端口的连接(在这种情况下&#xff0c;80)。我写这篇简短的脚本。echo ;asudo lsof -i :80;echo $a | awk {print $1," ",$2," ",$3," ",$8}; becho $a | wc -l; b$(($b - 1));echo Total SSH Connections: $b;echo 输出是…

为什么redis官方不支持linux,为什么linux下 用./redis

满意答案jingziooo2016.02.24采纳率&#xff1a;46% 等级&#xff1a;8已帮助&#xff1a;862人Version:0.9StartHTML:-1EndHTML:-1StartFragment:00000099EndFragment:000040451、解压缩2、进入压缩文件目录&#xff0c;编译安装 make && make installmake命令执行…

关于Spring配置 (Cannot find class [org.apache.commons.dbcp.BasicDataSource] 问题)

myeclipse抛出异常 1 org.springframework.beans.factory.CannotLoadBeanClassException: Cannot find class [org.apache.commons.dbcp.BasicDataSource] for bean with name dataSource defined in URL [file:/opt/app-w/apache-tomcat-7.0.54/webapps/telemetry/WEB-INF/cla…

c语言合法浮点数,c语言中什么是浮点数

浮点型简单讲就是实数的意思。浮点数在计算机中用以近似表示任意某个实数。具体的说&#xff0c;这个实数由一个整数或定点数(即尾数)乘以某个基数(计算机中通常是2)的整数次幂得到&#xff0c;这种表示方法类似于基数为10的科学记数法。浮点表示法&#xff1a;把一个数的有效数…

c语言函数的课程,c语言例子课程:函数.ppt

c语言例子课程&#xff1a;函数8.1 概述 例8&#xff0e;&#xff11;8 输出&#xff11;到&#xff15;的阶乘值 #include void main() &#xff5b;int fac(int &#xff4e;); int &#xff49;&#xff1b; for(&#xff49;&#xff1d;&#xff11;&#xff1b;&#xff…

z怎么搭建linux网站,Linux znew初学者命令实例教程

您是否知道Linux提供了一种将.Z文件重新压缩为.gz文件的方法&#xff1f; 是的&#xff0c;znew命令可以让你这样做。 在本教程中&#xff0c;我们将使用一些易于理解的示例讨论此命令行实用程序的基础知识。 但在我们这样做之前&#xff0c;值得一提的是&#xff0c;这里的所有…