关于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>

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

时间: 2024-08-04 21:45:21

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

github项目解析(七)--&gt;防止按钮重复点击

转载请标明出处:一片枫叶的专栏 本文中我将介绍一下我自己封装的一个小的工具类库:按钮点击事件类库. 作用: 该类库可以防止按钮重复点击,可以判断网络状态,可以判断用户登录状态,以及自定义验证条件等等. 说明: 其实现的核心原理就是通过自定义实现自身的OnClickListener类,并重写其中的onClick方法,在onClick方法中执行相应的判断逻辑之后回调我们自定义的抽象方法. 具体效果如下图所示: 使用方式 屏蔽多次点击事件 /** * 测试快速点击事件 */ fastButton.se

在Activity中响应ListView内部按钮的点击事件

最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.使用接口回调: Adapter类 1 package com.ivan.adapter; 2 3

在Activity中响应ListView内部按钮的点击事件的两种方法

转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.

按钮重复点击解决方案

防止重复提交,通用的思路,就是当用户点击提交按钮后,在浏览器中用JS将按钮disable掉,从而阻止用户继续点击该按钮,实现防止重复提交的目的.网上防止重复提交的文章已经不少了,为啥我还要写呢,显然我不是吃饱了撑的...最近一个客户,老抱怨每个月总有几条重复的业务数据:但创建该业务数据的页面,我们已经应用了常规的防重复提交技术,为啥还这样呢-- 1. 常规防重复提交 <asp:Button runat="server" ID="btnPostBack1" Te

iOS中防止两个按钮同时点击的方法

在iOS开发中通常会遇到,两个靠的很近的按钮,一不小心两个按钮同时点击了. 神奇的bug就产生了,如果两个按钮事件都是跳转页面的话,就会出现连跳两个页面的情况. 通常解决此问题的方法是:定义一个BaseViewController. 设置一个方法setExclusiveTouchForButtons:(UIView *)myView -(void)setExclusiveTouchForButtons:(UIView *)myView { for (UIView * v in [myView s

(转载)在Activity中响应ListView内部按钮的点击事件

使用接口回调和使用抽象类回调. 1.使用接口回调: Adapter类 1 package com.ivan.adapter; 2 3 import java.util.List; 4 5 import android.content.Context; 6 import android.util.Log; 7 import android.view.LayoutInflater; 8 import android.view.View; 9 import android.view.View.OnCl

React Native(十一)&mdash;&mdash;按钮重复点击事件的处理

最初开始做后台管理系统的时候,就曾遇到过这样一种场景:"快速点击确认按钮,就会对此触发确认事件,导致多次请求数据库":于是最终我们得当的通过处理那个确认button,解决了上述问题.而当自己开始使用RN做APP的时候,同样的问题居然也出现了,于是在处理完其他问题后,专门上网搜了一下此类问题的解决办法(不过好像都挺"高深一点",而自己却总认为越简单越好,那就摒弃了网上搜到的办法,另辟蹊径咯).突然意识到或许应该从源头解决,于是在官网中看到了这个: 原来在手机开发中也可

按钮重复点击问题 UIbutton

.h p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #c91b13 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; min-height: 21.0px } p.p4 { margin: 0.0px 0.0px 0

小程序 节流函数 (防止按钮重复点击)

function throttle(fn, gapTime) { if (gapTime == null || gapTime == undefined) { gapTime = 1500 } let _lastTime = null // 返回新的函数 return function () { let _nowTime = + new Date() if (_nowTime - _lastTime > gapTime || !_lastTime) { fn.apply(this, argume