按钮连续点击事件节流防抖

原文链接:https://dsx2016.com/?p=314

➢ 连续点击

只要是有点击事件的地方,都应该注意节流和防抖

➢ 节流防抖

• 函数节流: 指定时间间隔内只会执行一次任务；

• 函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

➢ 1s点击

1s内只允许发送请求(出发事件)一次(可多次点击)

test(){
    console.log(`点击登录 >>>>>>>>>>>>`)
}

添加节流

vue设置变量

stopClickLogin:false

vue设置函数

test(){
    let that=this
    if(that.stopClickLogin){
        console.log(`请等待1s后再次点击 >>>>>>>>>`)
        return false
    }
    that.stopClickLogin=true
    setTimeout(()=>{
        that.stopClickLogin=false
    },1000)
    console.log(`do something >>>>>>>>>`)
}

➢ 函数封装

公共函数设置

stopClick(name=`stopClick`,time=1000,msg=`请等待1s后再次点击`){
    return new Promise((resolve,reject)=>{
        if(that[name]){
        console.log(`${msg} >>>>>>>>>`)
        return false
        }
        that[name]=true
        setTimeout(()=>{
            that[name]=false
        },time)
        resolve()
    })
}

引用节流函数

test(){
    let that=this
    that.stopClick(`stopClickLogin`).then(()=>{
        console.log(`do something >>>>>>>>>`)
    })
}

封装之后就不用在每个点击的地方都写一遍重复函数了