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

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

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

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

/**
第一种：利用element组件el-button特性处理
*/
<el-button type="primary" :disable="disable" size="small" @click="SetOutClick">按钮触发</el-button>SetOutClick(){this.disable = true;//位置1this.API().then(res => {if(res.code === 200){//位置2console.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}//位置1this.API().then(res => {if(res.code === 200){//位置2console.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)
}