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. javascript中的立即执行函数的原理

    形如 ((function Test(a) { //code here... })('Hello')); 被称作立即执行函数. 首先需要了解的是,这并不是一种hack,这是javascript的基本语 ...

  2. Ansible 安装与配置(一)

    公司大概有200多云主机需要进行管理,但是如果通过手工管理费时还累最终结果也容易出错,所以考虑通过自动化的方式来管理云主机,目前开源的自动化工具,大家用的比较多的有Ansible和Saltstack这 ...

  3. 嵌入式C语言常见的错误

    预处理的错误: #include “stdio.h”   //引用符号错误 #inlcude <name>  //自定义文件用 "  " not find gcc -I ...

  4. markdown特殊符号语法

    符号 说明           对应编码 &    AND符号        & < 小于           < > 大于           > _    ...

  5. Java Socket NIO

    服务端: public class NIOServer { private static final String HOST = "localhost"; private stat ...

  6. 从零开始编译Poco C++和VS2015环境配置

    Poco C++是一个C++的开源框架,详细介绍可以问百度介绍更详细,这里我就记录下我从零编译poco-1.9.0和配置 VS2015的环境,以备不时之需. 步骤:一.安装cmake: 二.编译poc ...

  7. windows旋转屏幕快捷键配置

    1.打开屏幕分辨率 2.高级设置 3.英特尔核心显卡控制板 4.图形属性 5.选项和支持 6.管理快捷键(启用.禁用)

  8. 初学爬虫,关于scrapy

    对于anaconda与pycharm,因为在pycharm中一直下不成功tensorflow,所以后来又下了anaconda,pycharm就可以直接使用anaconda的编译器, 一直都很正常,但是 ...

  9. Linux 的文件软链接如何删除

    Linux 的文件软链接如何删除创建软链接即用 ln -s 原始文件或文件夹 目标文件或文件夹 举例:[root@recover test]# pwd/test[root@recover test]# ...

  10. Java 中 Equals和==的区别(转)

    另外一篇参考: https://blog.csdn.net/striverli/article/details/52997927 在谈论equals和==的区别前,我们先简单介绍一下JVM中内存分配的 ...