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

解决方案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)
                    }
                },

 

 

更多推荐