zoukankan      html  css  js  c++  java
  • 关于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>

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

  • 相关阅读:
    前端面试题汇总
    前端学习计划汇总
    idea修改项目名导致无法找到主类
    idea run dashbord使用
    记git提交异常
    关于META-INF下的spring.factories文件
    lombok注解
    springcloud-ribbon&feign
    CAP定理
    git文件锁定不更新和忽略
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/5774031.html
Copyright © 2011-2022 走看看