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

    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），所以这种情况也是没问题的。

结果：没问题。