var lastClick;
lockClick(){
var nowClick = new Date();
if (lastClick === undefined) {
lastClick = nowClick;
return true;
} else {
if (Math.round((nowClick.getTime() - lastClick.getTime())) > 500) {
lastClick = nowClick;
return true;
}
else {
lastClick = nowClick;
return false
}
}
} this.on('click',()=>{
if (this.lockClick()) {
//你的函数代码
}
})

解释:首先定义变量lastClick,然后定义一个锁点击事件的函数。

情况1:

  刚加载,点击一次。

过程分析:

  lastClick是undefined

  执行lockClick函数,获取当前时间存入nowClick变量,此时lastClick === undefined 为true ,进入判断执行,lastClick值为nowClick的时间值,return true,执行了一次我的业务代码。

结果:

  没问题。

情况2:

  刚加载,快速点击两次,点击时间小于500MS。

过程分析:

  第一次,lastClick是undefined  ,执行lockClick函数,获取当前时间存入nowClick变量,此时lastClick === undefined 为true ,进入判断执行,lastClick值为nowClick的时间值,return true,执行了一次我的业务代码。

  第二次,lastClick的值是上一次nowClick的时间值,执行lockClick函数,这次lastClick === undefined 为false,进入下一个条件判断执行,因为点击速度小于500,所以当前获取的时间减去上一次的时间是小于500的,此时再次把当前时间赋值给lastClick,这是为了更新上一次的时间为现在点击的时间,为了下次点击进行比较而进行的必要赋值。此时return false。那么业务代码就不会执行了。

  所以,快速点击两次,只会执行一次业务代码。

结果:

  没问题。

情况3:我们开始考虑,因为都是刚加载,那么第一次是对的,第二次是错的,那不是刚加载,我再次点击呢?那其实第一次点击就是上一次的时间跟现在的时间对比其实还是大于500MS的,第二次点击因为更新的时间所以时间还是小于500MS,还是不会触发业务代码。所以这种情况的第一次只是是否是undefined的区别,是undefined会执行,不是undefined因为是第一次跟上一次执行的进行对比时间大于500MS(从实际情况分析肯定大于500MS),所以这种情况也是没问题的。

结果:没问题。

如何解决 快速点击多次触发的bug 期望快速点击只一次生效的更多相关文章

  1. iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath(汇总)

    iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath 首先分析有几种原因,以及相应的解决方法 1.UITableViewCell的userInterac ...

  2. label标签内含有input元素,点击事件会触发两次

    **label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...

  3. jquery点击元素之外触发事件

    $("#errorMsg_layer").bind("click",function(e){ if($(e.target).closest("#err ...

  4. 点击 a 标签触发事件而不跳转页面

    有时候需要让 a 标签像 button 一样,被点击的时候触发事件而不跳转页面. <html> <body> <a id="a1" href=&quo ...

  5. [C# 基础知识系列]专题五:当点击按钮时触发Click事件背后发生的事情 (转载)

    当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑问的—— ...

  6. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  7. 2019-11-29-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因...

    原文:2019-11-29-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因... title author date CreateTime c ...

  8. 2019-5-8-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因...

    title author date CreateTime categories WPF 绑定命令在 MVVM 的 CanExecute 和 Execute 在按钮点击都没触发可能的原因 lindexi ...

  9. 识别拖动与点击操作之zepto的bug

    问题描述:给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以响应.但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击 ...

随机推荐

  1. http options 请求

  2. ftruncate

    普通文件或共享内存区的大小都可以通过该函数修改 #include <unistd.h> int ftruncate(int fd,off_t leght); //成功返回0失败返回-1 对 ...

  3. httpd日志格式

    日志的缺省格式有如下几种: LogFormat "%h %l %u %t "%r" %>s %b "%{Referer}i" "%{U ...

  4. operator用法:隐式类型转换

    operator它有两种用法,一种是operator overloading(操作符重载),一种是operator casting(操作隐式转换). 1.操作符重载C++可以通过operator实现重 ...

  5. HD,3G视频数据中行号的插入方法---Verilog代码实现

    HD,3G视频数据中行号的插入方法---Verilog代码实现 行号的生成: `timescale 1ns / 1ps //////////////////////////////////////// ...

  6. 【C++】关键字inline

    1. 引入inline关键字的原因 在c/c++中,为了解决一些频繁调用的小函数大量消耗栈空间(栈内存)的问题,特别的引入了inline修饰符,表示为内联函数. 栈空间就是指放置程序的局部数据(也就是 ...

  7. 【mark】OS是否使用svc方式分开系统空间和用户空间的优劣

    对于Cortex-M单片机,用户程序调用RTOS系统函数有两种思路: 假设创建任务的RTOS函数是xxx_task_create() 第一类:FreeRTOS.RT-Thread中采用的方法,和调用普 ...

  8. mongodb shell 运行js脚本的四种方式

    1. 交互式 mongo shell   大部分的 mongodb 教程,在第一章都会讲解这种方式. mongo 127.0.0.1:27017 use test db.users.findOne() ...

  9. Ubuntu16.04下安装Hyperledger Fabric 1.0.0

    系统环境 * Ubuntu: 16.04 * Go: 1.9.2 * NodeJS: v6.12.0 * Docker: 17.09.0-ce * HyperLedger Fabric: 1.0.0 ...

  10. 从容器里dump java堆实验探索(原创)

    目标:从docker容器里dump java堆 模拟程序 占用空间500M, 设置启动JVM参数 docker启动命令 (PS:经过测试,至少要650M才能启动容器) 方式1: 通过docker ex ...