小程序按钮重复点击解决方案

---

前言

小程序是直面用户便捷的应用，而在用户使用时往往都会涉及到关键节点的按钮点击，例如，注册登录时，页面跳转时，发送验证码时，付钱还款，弹出提示等等。。。如果没有控制好按钮重复点击的问题，那么影响用户体验。当然有时候也会被同行吐槽，这人不行。。。

---

一、为什么会发生重复点击

1、点击按钮后有网络请求，请求有时长。此时用户可能在网络请求成功前，再次点击按钮。
2、点击按钮后没有给到用户好的反馈效果，用户以为没有点击到，或者没有点击成功。
3、手机发生卡顿，应用性能下降，点击按钮事件实际已经触发，但是没有反馈效果，用户再次点击。

二、针对以上问题怎么处理

1、分析解决方法：

1、当用户点击按钮后，给到用户点击反馈。
2、当用户点击按钮后，禁用按钮，不可再次点击。

1. 反馈

当触发按钮点击事件，并且关联重要网络请求，需要给出反馈，以下举例集中反馈方法。
1、按钮loading
直接利用小程序按钮组件提供的loading属性，动态控制按钮loading效果

<template>
	<view class="content">
		<button @tap="dianJi" :loading="isClick">
			点击-{{!isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	let isClick = ref(false)
	const dianJi = () => {
		isClick.value = true
		setTimeout(()=>{
			isClick.value = false
		}, 2000)
	}
</script>

2、页面loading
利用uni.showLoading api完成

<template>
	<view class="content">
		<button @tap="dianJi">
			点击-{{!isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	let isClick = ref(false)
	const dianJi = () => {
		uni.showLoading({
			mask: true,
			title: "请稍候"
		})
		isClick.value = true
		setTimeout(()=>{
			isClick.value = false
			uni.hideLoading()
		}, 2000)
	}
</script>

3、点击效果样式变化
利用组件提供属性，设置点击改变背景颜色

<template>
	<view class="content">
		<button @tap="dianJi" hover-class="isClickStyle">
			点击-{{!isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>
<script setup>
	import { ref } from "vue"
	let isClick = ref(false)
	const dianJi = () => {
		isClick.value = true
		setTimeout(()=>{
			isClick.value = false
		}, 2000)
	}
</script>
<style>
	.isClickStyle {
		background-color: aquamarine;
	}
</style>

当然你也可以用伪类选择器设置颜色-当然还是建议使用官方提供的属性来设置，毕竟不会有问题

<style>
	button:active {
		background-color: aqua;
	}
</style>

4、toast提示
只需用到uni api 就可以实现更多用法可以参考文档

uni.showToast({
	title: '点击'
})

2.禁用

当触发按钮点击事件时，禁用按钮，不可点击。
1、禁用按钮disabled
功能描述： 点击按钮控制标识，动态控制disabled属性。

<template>
	<view class="content">
		<button
		 @tap="dianJi"
		 :disabled="!isClick"
		>
		 点击-{{isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
import { ref } from "vue"
let isClick = ref(true)
const dianJi = () => {
	isClick.value = false
	// 模拟异步请求
	setTimeout(() => {
		isClick.value = true
	}, 2000);
};
</script>

2、点击样式控制pointer-events
功能描述： 点击按钮控制标识，动态控制css样式pointer-events属性。

<template>
	<view class="content">
		<button
		 @tap="dianJi"
		 :style="{'pointer-events': isClick ? 'auto' : 'none'}"
		>
		 点击-{{isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
import { ref } from "vue"
let isClick = ref(true)
const dianJi = () => {
	isClick.value = false
	// 模拟异步请求
	setTimeout(() => {
		isClick.value = true
	}, 7000);
};
</script>

4、js控制标识阻止代码执行

<template>
	<view class="content">
		<button
		 @tap="dianJi"
		>
		 点击-{{isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
import { ref } from "vue"
let isClick = ref(true)
const dianJi = () => {
	if (!isClick.value) {
		return
	}
	isClick.value = false
	// 模拟异步请求
	setTimeout(() => {
		isClick.value = true
	}, 2000);
};

5、节流防抖–具体代码讲解应该很熟悉了，就不讲解了
防抖

let timeout;
function debounce(func, wait, immediate) {
	return function() {
		let context = this;
		let args = arguments;
		if (timeout) clearTimeout(timeout); 
		if (immediate) {
			let callNow = !timeout; 
			timeout = setTimeout(function() {
				timeout = null;
			}, wait)
			if (callNow) {
				func.apply(context, args)
			}
		} else {
			timeout = setTimeout(function() {
				func.apply(context, args)
			}, wait);
		}
	}
}

节流

let timer = null
function throttled(fn, delay) {
	let starttime = Date.now()
	return function() {
		let curTime = Date.now() 
		let remaining = delay - (curTime - starttime) 
		let context = this
		let args = arguments
		clearTimeout(timer)
		console.log(65654645, remaining <= 0)
		if (remaining <= 0) {
			fn.apply(context, args)
			starttime = Date.now()
		} else {
			timer = setTimeout(fn, remaining);
		}
	}
}

三、最优解决

1、将用户点击反馈和按钮禁用结合使用

---

总结

如有问题欢迎指出，如果有其他办法欢迎评论指导学习。