如何预防按钮重复点击？

Creator 2.x
#1

首先，我的需求很简单，就是防止按钮重复点击。

其实，我这边结合网络资料与自己想法总结了一下几个解决方案：
1.设置flag变量，点击事件开始时候根据该变量做相应处理(开始时设置为false，结束设置为true)
2.事件开始时试着enable = false;结束的时候设置true；
3.新建一个js脚本文件绑定处理。

前两种比较大众一点，第三种我是受官方demo中21点游戏启发，想的一个，不过不知道能不能行，再次请教各位。

上代码

cc.Class({
extends: cc.Component,

properties: {
    clickTime:-1,//点击时间
    minInterval:1000,//最小点击间隔时间
},

// use this for initialization
onLoad: function () {
    var self = this;
   
    function onTouchDown (event) {
        if(self.clickTime == -1){
            self.clickTime = new Date().getTime();
        }else{
            var now = new Date().getTime();
            if(now - self.clickTime < self.minInterval){
                //点击间隔小于预设值
                //TODO 如何中断所绑定的函数
            }else{
                self.clickTime = now;
            }
        }
    
    }
    
    function onTouchUp (event) {
        
    }
    
    this.node.on('touchstart', onTouchDown, this.node);
    this.node.on('touchend', onTouchUp, this.node);
    this.node.on('touchcancel', onTouchUp, this.node);
},

// called every frame, uncomment this function to activate update callback
// update: function (dt) {

// },

});

代码中，我知道了点击间隔小于了预设值，那我怎么阻断其他函数的响应？

传送：
Button:http://www.cocos.com/docs/creator/api/classes/Button.html
Component.EventHandler:http://www.cocos.com/docs/creator/api/classes/Component.EventHandler.html

#2

可以在点击一次过后，就将按钮的 interactable 设为 false

#3

我着相了。。。。。
我一开始直接this.interactable = false;没起效果，结果就怀疑是不是是不是这个阻断不了。
后来看了您的回复，仔细想了一下，self.getComponent(cc.Button).interactable = false;应该是这样

现在OK了

#4

只要我点击的够快，还是没法禁用！这个逻辑本身是无法绝对禁止掉的，不是说实际做不到，而是你们的按钮做不到，只因为你们的按钮事件监听和禁用按钮逻辑是分开的，在多数情况下，用户需要的是可以每隔500ms才允许点击一次，而不是一直允许点击，应该做一个按钮每次点击后休眠多少ms，这个得底层改，应用层根本做不到

#5

逻辑阻断，按纽事件执行时检验将某个变量

#6

我疯狂点击，上一个按钮的回调事件都没开始执行，下一次点击回调已经触发了，明白我表达的意思吗？

#7

再怎么疯狂点击，设置一个外部变量为假，执行一次变为真，为真时不执行后续事件代码，不是很容易阻断重复么。收到反馈后（如服务器返回）再将该外部变量重置

#8

比如clicked=false；
事件函数（）｛
if （!clicked) ｛
clicked=true;
处理事情｝
｝

#9

你还是不明白这个机制，你自己试下就知道了

#10

写个装饰器不就好了? 再需要的地方加个装饰器

#11

不是很懂，可以写个我看看吗？应该不用10来分钟，我看下你是怎么做到限制按钮被点击的？

#12

现在流行挖坟吗？

#13

const { ccclass, property } = cc._decorator;

/**

  • 按钮点击限制节流
  • @param lockTime 阻塞时间
  • @param callBackFun 节流回调 多次点击的时候给一个回调函数提示用户不要多次点击
    */
    export function ButtonLock(lockTime: number = 0.3, callBackFun?: Function) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    let oldFun: Function = descriptor.value;
    let isLock: boolean = false;
    descriptor.value = function (…args: any[]) {
    if (isLock) {
    callBackFun?.()
    return
    }
    isLock = true;
    setTimeout(() => {
    isLock = false
    }, lockTime * 1000);
    oldFun.apply(this, args);
    }
    return descriptor
    }
    }

@ccclass
export default class NewClass extends cc.Component {

// onLoad () {}

start() {

}

update(dt) {
    // cc.error(this.text)
}

@ButtonLock(1, () => { cc.error('fff') })
cccc() {
    cc.error('click_once')
}

}

2赞
#14

非常感谢，你这个确实可以做到。我终于知道为什么cc单纯的设置按钮的可点击性为什么控制不住了，原来是引擎每隔一定的时候才会刷新界面，而如果采用装饰器的模式，则不存在这个冷却的时间。

#15

按照你这个逻辑根本限制不主的，需要额外的变量类似装饰器的形式才可以限制到，项目实测，并非意淫！