vue实现用户3秒内多次点击。请求只发送一次

在Vue项目中,通过设置按钮的disabled属性,结合setTimeout实现用户在3秒内多次点击按钮但只发送一次请求的功能。点击事件中,先禁用按钮,3秒后请求完成再解除禁用,确保请求期间按钮状态一致。
摘要由CSDN通过智能技术生成

vue实现用户3秒内多次点击。请求只发送一次

最近做项目,用户连续点击按钮会一直向后台发送请求,最后按钮的状态会跟后台返回的不统一,于是用这个方法实现了用户不管点多少次,在3秒内只请求一次

看如下代码,使用点击事件的disabled属性

<button :disabled="state"  @click="clickbtn"></button>

//在data里面设置state原始的属性值
data(){
	return{
		state:false
	}
}
//在methods里面写点击事件
clickbtn(){
	if(this.state == false){
			let that = this
			that.state = true
			setTimeout(()=>{
				//请求数据。。。
				//请求成功后在返回的状态里面加上下面这句话
				that.state = false
			},3000)
		}
}

好啦,这样就实现了在3秒之前即使点击多少次,也只发送一次请求

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值