前端防止按钮被多次点击

前端的部分逻辑有时候控制前端的显示,比如记录收藏数目等等。有时候多次重复点击会造成前端显示的bug。所以需要有部分逻辑判断去筛除掉重复多次的点击。

实现部分代码如下,主要是通过setTimeout去加以判断,即无论点击几次,间隔一定时间才会去触发一次事件,从而只产生一次的记录:

<script>
        var i=0;  //判断点击次数寄存
        var closetimer = null;  //延时函数寄存

function Button1_Click()  //botton点击事件
   {
        console.log('1');
        i++;  //记录点击次数
        closetimer = window.setTimeout(setout,200);  

    }
function setout(){  //点击执行事件
if(i>1)   //如果点击次数超过1
    {
        console.log('wrong');
        window.clearTimeout(closetimer);  //清除延时函数
        closetimer = null;  //设置延时寄存为null
        //添加操作代码
        i=0;  //重置点击次数为0
    }
else{  //如果点击次数为1
        console.log('right');
        i=0;  //重置点击次数为0
        //添加执行操作的代码
}
}
</script>

前端防止按钮被多次点击

时间: 2024-10-12 20:03:57

前端防止按钮被多次点击的相关文章

练习题:获取登录按钮及整个登录面板,给登录按钮添加事件,点击时让登录层示,点击登录面板的关闭按钮,关闭整个登录层

获取登录按钮及整个登录面板,给登录按钮添加事件,点击时让登录层示,点击登录面板的关闭按钮,关闭整个登录层 点击登录后: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .head{font-size:1

6种值得收藏的Web前端多彩按钮组件(上)

1. jQuery模拟skype按钮效果 源码下载/  在线演示 2.  CSS3动画暗角按钮 源码下载 /  在线演示 3.CSS3实现彩色凹凸按钮 源码下载/   在线演示 6种值得收藏的Web前端多彩按钮组件(上)

6种值得收藏的Web前端多彩按钮组件(下)

4.CSS3实现超酷下载按钮 能在支持 FireFox.Chrome.Safari.傲游.搜狗.360浏览器. 源码下载/   在线演示 5.  CSS3按钮生成器jQuery插件 源码下载 /  在线演示 6.  CSS3实现创意链接样式 源码下载/  在线演示 6种值得收藏的Web前端多彩按钮组件(下)

Flutter“不能热加载(hot reload),热重载按钮灰色且无法点击”的解决方案

前言,Flutter的热重载(hot reload)功能可以帮助您在无需重新启动应用的情况下快速.轻松地进行测试.构建用户界面.添加功能以及修复错误. 通过将更新后的源代码文件注入正在运行的Dart虚拟机(VM)中来实现热重载. 在虚拟机使用新的的字段和函数更新类后,Flutter框架会自动重新构建widget树,以便您快速查看更改的效果. 要热重载一个Flutter应用程序: 从受支持的IntelliJ IDE .Android Studio 或终端窗口运行应用程序.物理机或虚拟器都可以运行.

iOS解决按钮短时间内多次点击只触发一次事件方法

在上家公司做项目的时候,做了个60秒获取验证码的功能,当时做了个定时器,按钮触发定时器,逻辑来讲都是没问题的,但是实际操作的时候,恶意的在短时间内多次点击那个获取验证码按钮,按钮的点击事件被调用了多次,定时器从而也调用多次,本来一秒减一的事件变成了一秒减多,并且减到0后继续调用方法,直到响应点击次数调用完,这完全不符合我们的心意. 时隔2月,我在新公司工作了,回头来看这个问题,为了解决这个问题,我在百度上查了许多资料,解决后将解决办法写入自己的博客,和大家分享自己的技术,也为自己一直想写博客做个

scaleType-模拟按钮加文字整天点击效果

经常碰到这种情况,就是一个按钮下面有文字,我们点击按钮的时候,按钮跟文字的背景都是同时变化的.我们看下下面的效果 点击以后如下 如果想要实现这个方法,网上有很多的方法,主要就是自定义控件,或者是使用textview本身提供的增加drawable方法.这里主要是使用一个偷懒的方法.使用ImageButton 跟 TextView 一起实现.虽然方法很笨,灵活性很差.但至少能实现效果.如下 <RelativeLayout android:layout_width="200dp" an

android 自定义带按钮的Notification及点击事件和伸缩通知栏

1.自定义一个带按钮的Notification布局:layout_notification: 2.创建Notification: RemoteViews views = new RemoteViews(getPackageName(),R.layout.layout_nitification); //自定义的布局视图 //按钮点击事件: PendingIntent homeIntent = PengdingIntent.getBroadcast(this,1,new Intent("action

屏蔽用户双击按钮产生的后续点击事件重复发生问题

屏蔽web端双击鼠标产生问题 从上面两张图就可以看出,如果用户误操作双击"确认支付并出保险"按钮,则会出现如上图现象.如何消除此现象呢? 我想到的解决方法:在调用的click事件时,设置一个flag开关,flag类型为boolean型默认值为true的且为全局变量.flag为判断条件放入if语句中,当第一次点击触发事件时,设置flag为false并执行点击事件绑定方法.如此,当用户点击第二次时,flag为false,不执行点击事件绑定方法.这就有效避免了上图问题的发生.       v

input,button制作按钮IE6,IE7点击时1px黑边框的解决方法

按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn{ border:none;} <span class="btnbox"><input class="btn" type="button" value="按钮"></span> 第二种办法通过滤