js--按钮防止重复点击

需求:业务需求在做一些营销型活动的时候,对于一些自定义的按钮可能会存在用户快速点击的情况,为了降低用户的点击频率

解决方案1:

data: {
                timer:true
			},
// 点击函数
greet: function() {
                    let self = this
                    if(self.timer){
                        self.timer = false;
                        //业务逻辑
                        //......
                        console.log(`123`, 123)
                        //逻辑结束
                        setTimeout(function(){
                            self.timer = true;
                        },2000)
                    }
				},

解决方案2(防抖函数): 

<button v-on:click="greet">Greet</button>

data: {
                timer:null,
},

greet: function() {
                    // ## 防抖函数的调用方法
                    // example:
                    // ```
                    // this.debounce(this.函数名,3000)()
                    // ```
                    // **在使用这个函数的时候我遇到了一些问题:**
                    // 因为微信小程序中很多地方都需要使用this.setData,如果对于this指向的理解不深入的话,很容易出现以下情况:
                    // 1:this==undefined;
                    // 2:Error:data is not defined;
                    // 等等一些列关于this的问题。
                    // **解决方法**:
                    // ```
                    // this.debounce(this.函数名.bind(this),3000)()
                    // ```
                    // 使用bind(this)把this指向传到函数内部就解决了。
                    // this.debounce(this.request.bind(this),2000,true)()
                    this.debounce(this.request,2000,true)()
				},
                request(){
                    console.log(`123`, 123)
                },
/**
                *防抖函数
                *{param:function} fn 回调函数
                *{param:number } wait 等待秒数
                *{param:boolean } immediate -- true 第一次点击立即执行 false 第一次点击不是立即执行 
                */
                debounce(fn, wait,immediate) {
                    /*缓存一个定时器*/
                    return function() {
                        let args = arguments;
                        let context = this;
                        if(immediate && !this.timer){
                            fn.apply(context, args);
                        }
                        if(this.timer) clearTimeout(this.timer);
                        this.timer = setTimeout(() => {
                            fn.apply(context, args)
                        }, wait)
                    }
                },

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

短暂又灿烂的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值