前端防止button被多次点击
前端的部分逻辑有时候控制前端的显示。比方记录收藏数目等等。有时候多次反复点击会造成前端显示的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>
前端防止button被多次点击的更多相关文章
- js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- ListView中嵌入布局的Button或多个点击事件
有时候在ListView嵌入的布局中有多个事件需要点击,比如一个item中有TextView和Button两个布局,当我们需要获取这两个点击事件时,我们应该如何去获取呢,通常来说,我们都是已经固定好了 ...
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
- iOS 在tableView上添加button导致按钮没有点击效果和不能滑动的 zhuang
转载请注明出处. 今天在调试代码的时候,在tableviewcell上添加button,发现button快速点击的话,是看不出点击效果的,查找资料发现, ios7上UITableViewCell子层容 ...
- 【转】Android - Button(按钮)的响应点击事件的4种写法
原文网址:http://www.yrom.net/blog/2011/12/12/android-4-onclicklistener-of-button/ Button控件setOnclickList ...
- Button的五种点击事件
1.内部类方式 class MyOnClickListener implements View.OnClickListener{ /** * Called when a view has been c ...
- Button控件的点击事件
Java的代码 主要重点: findViewById(); OnClickListener() package com.example.admin.myapplication; import andr ...
- Unity3D NGUI 二 NGUI Button怎样接受用户点击并调用函数,具体方法名称是什么
a.直接监听事件 把下面脚本直接绑定在按钮上,当按钮点击时就可以监听到,这种方法不太好很不灵活. void OnClick(){ Debug.Log("Button is Click!!!& ...
- Android - Button(按钮)的响应点击事件的4种写法
Button控件setOnclickListener(View.OnClickListener listener)来接收一个点击事件的监听器 自定义一个点击事件监听器类让其实现View.OnClick ...
随机推荐
- linux虚拟机网络设置好ping百度没有用
场景:公司内网,本机使用的是本地连接,不是wiff,虚拟机设置了桥接模式 问题:使用桥接模式 启动好网络服务,查看ifconfig也获取到了设置的ip,可是ping了www.baidu.com还是没有 ...
- IOC与DI区别
(1)IOC:控制反转,把对象创建交给spring进行配置. (2)DI:依赖注入,向类里面的属性中设置值. (3)关系:依赖注入不能单独存在,需要在IOC的基础之上完成操作.
- tp中使用事务
是什么 事务是为了防止,多个操作,其中有失败,数据有部分被执行成功的时候使用的. 比如,银行,用户转账.张三钱扣了,结果李四钱还增加! 这个时候需要使用事务,确保张三钱扣了,李四的钱也增加,才真正的成 ...
- html 中表单元素input type="hidden"的作用
转自:https://blog.csdn.net/xiaobing_122613/article/details/54946559 (隐藏只是在网页页面上面不显示输入框,但是虽然隐藏了,还是具有for ...
- 11.QT窗口布局切割
int main(int argc, char *argv[]) { QApplication a(argc, argv); //MainWindow w; //w.show(); //左右分割 7 ...
- linux 安装redis zookeeper
安装redis: http://www.redis.cn/download.html 安装的前提条件: 需要安装gcc:yum install gcc-c++ wget http://download ...
- ros中文术语表及消息类型表
前言:整理一些ros常用表格,包括中文术语对照表. 一.中文术语表 二.消息类型表 -END-
- spring《四》自动装配
byName模式<bean autowire="byName"> Spring会查找一个叫做date的bean定义. byType模式<bean autowire ...
- Spark SQL 编程API入门系列之Spark SQL的作用与使用方式
不多说,直接上干货! Spark程序中使用SparkSQL 轻松读取数据并使用SQL 查询,同时还能把这一过程和普通的Python/Java/Scala 程序代码结合在一起. CLI---Spark ...
- BZOJ4819: [Sdoi2017]新生舞会(01分数规划)
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1029 Solved: 528[Submit][Status][Discuss] Descripti ...