【记录47】防止按钮短时间频繁点击触发接口，导致影响性能和用户的体验不好及浪费资源

情景一：在极短的时间内鼠标点击了两次或两次以上

情景二：某些环境下，有的人会将鼠标点击设置为连击（按一次，实际按了两次）

为了避免这种情况，我们可以给按钮添加 “类似计时器的东西” 去做处理
全文的接口请求，笔者用this.API()去代替

/**
第一种：利用element组件el-button特性处理
*/
<el-button type="primary" :disable="disable" size="small" @click="SetOutClick">按钮触发</el-button>

SetOutClick(){
	this.disable = true;
	//位置1
	this.API().then(res => {
		if(res.code === 200){
			//位置2
			console.log('请求成功')
		}else{
			//位置3
		}
	})
	//位置4
	// 位置1、2、3、4 都可以放this.Time()方法
},
// 两秒内只能点击一次
Time(){
	setTimeOut(() => {
		this.disable = false;
	}, 2000)
},

/**
第二种：html常规的写法，利用计数器模仿el-button  disable特性
默认数值为0，如果点击自加一，等于一再去触发接口，利用setTimeOut()函数设置两秒后重置数值为0即可，两秒内任他点击100次还是3次都只触发一次接口
*/
<button  @click="SetOutClick">按钮</el-button>
this.buttonlist = [0,0,0,0,] // 4个0分别代表四个按钮的计数默认值，这里以 this.buttonlist[0]说明

SetOutClick(){
	this.buttonlist[0] ++;
	if(this.buttonlist[0] !== 1){
		return
	}
	//位置1
	this.API().then(res => {
		if(res.code === 200){
			//位置2
			console.log('请求成功')
		}else{
			//位置3
		}
	})
	//位置4
	// 位置1、2、3、4 都可以放this.Time()方法
},
// 两秒内只能点击一次
Time(){
	setTimeOut(() => {
		this.buttonlist[0] = 0;
	}, 2000)
},

(待验证)
这里肯定有人觉得每一个按钮去加一个“误触或频繁点击”太麻烦了，下面我们试着写一个全局公用方法去做防止频繁点击

第一步：新建一个Prevent_frequent_clicks.js文件

第二步：在js文件中写入以下代码

/***

*/
//  apilist   里面放的是接口及传参
apilist = [
	CourseAPI.courseGet(params),
	CourseAPI.coursePost(params, data),
]
const numval = 0;
function PreventFrequent (apilist ) {
	numval++;
	//写法一
	if(numval !== 1){
		TimeRest();
		return 
	}
	Promise.all(apilist ).then(res => {
		TimeRest();
		return res
	})
}
function PreventFrequent (apilist ) {
	numval++;
	//写法二
	if(numval == 1){
		Promise.all(apilist ).then(res => {
			TimeRest();
			return res
		}) 
	}
}
function TimeRest(){
	setTimeOut(() => {
		numval = 0;
	}, 2000)
}
export { PreventFrequent  }

第三步：在需要的文件import { PreventFrequent } from '@/Prevent_frequent_clicks.js' 导入

第四步：在对应的按钮事件中引用

buttonClick(){
	let apilist = [
		this.api.get(params),
		this.api.post(params, data)
	];
	const result  = PreventFrequent(apilist );
	console.log(result)
}