js--按钮防止重复点击
【代码】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)
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)