前端的部分逻辑有时候控制前端的显示。比方记录收藏数目等等。有时候多次反复点击会造成前端显示的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被多次点击的更多相关文章

  1. js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  2. ListView中嵌入布局的Button或多个点击事件

    有时候在ListView嵌入的布局中有多个事件需要点击,比如一个item中有TextView和Button两个布局,当我们需要获取这两个点击事件时,我们应该如何去获取呢,通常来说,我们都是已经固定好了 ...

  3. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  4. iOS 在tableView上添加button导致按钮没有点击效果和不能滑动的 zhuang

    转载请注明出处. 今天在调试代码的时候,在tableviewcell上添加button,发现button快速点击的话,是看不出点击效果的,查找资料发现, ios7上UITableViewCell子层容 ...

  5. 【转】Android - Button(按钮)的响应点击事件的4种写法

    原文网址:http://www.yrom.net/blog/2011/12/12/android-4-onclicklistener-of-button/ Button控件setOnclickList ...

  6. Button的五种点击事件

    1.内部类方式 class MyOnClickListener implements View.OnClickListener{ /** * Called when a view has been c ...

  7. Button控件的点击事件

    Java的代码 主要重点: findViewById(); OnClickListener() package com.example.admin.myapplication; import andr ...

  8. Unity3D NGUI 二 NGUI Button怎样接受用户点击并调用函数,具体方法名称是什么

    a.直接监听事件 把下面脚本直接绑定在按钮上,当按钮点击时就可以监听到,这种方法不太好很不灵活. void OnClick(){ Debug.Log("Button is Click!!!& ...

  9. Android - Button(按钮)的响应点击事件的4种写法

    Button控件setOnclickListener(View.OnClickListener listener)来接收一个点击事件的监听器 自定义一个点击事件监听器类让其实现View.OnClick ...

随机推荐

  1. Redis常用的命令

    常规命令查询地址: http://redisdoc.com/ 如下图:

  2. CentOS 7 NAT模式上网配置

    一 VMware 配置 在“编辑”选项卡中,选择“虚拟网络编辑器”,如下图: 选择VMnet8,修改子网IP与子网掩码,注意不要给“使用本地DHCP服务将IP地址分配给虚拟机”选项打勾,如下图: 点击 ...

  3. Android DrawerLayout设置左右侧滑菜单为全屏

    我们可以在MainActivity中获取屏幕宽度后动态赋值给侧滑菜单. 在oncreate时 DisplayMetrics metric = new DisplayMetrics(); getWind ...

  4. ZBrush中设置背面遮罩的两种方法

    背面遮罩是ZBrush软件实时遮罩的一种,它的出现能够解决我们在模型雕刻时的一些问题.我们在 ZBrush®中雕刻一个比较薄的物体时,经常会不经意的雕刻到背面的物体.那么遇到此类状况该如何设置ZBru ...

  5. arttemplate模板引擎里面多层循环

    要使用支持原生js的插件: 代码截图: json数据 { "list": [ { "name": "学历层次", "item&qu ...

  6. 记一次mybatis<if>标签的问题

    前言 到底还是没理解清楚的锅~~~~搞了好久...啊啊啊啊 错误: There is no getter for property named 'name' in 'class java.lang.L ...

  7. Python-超好用的Django源码解析

    http://djangobook.py3k.cn/2.0/

  8. Pyhton学习——Day47

    # 转载:http://www.cnblogs.com/yuanchenqi/articles/6357507.html# 外键:一种约束条件,与主键对应# 主表:被绑定的表:字表# 外键约束:# - ...

  9. 基础——(4)D Latch(D锁存器)

    S-R Latch Put a inverter there: Invertor的组成: tie both of the inputs together加上一个nor gate 就能组成一个inver ...

  10. HTML 捕获window.close() 并做窗口关闭前的处理工作

    转自:http://www.xinotes.net/notes/note/261/ <html> <head> <script language="JavaSc ...