在网页开发过程中,经常遇到按钮被频繁点击造成请求重复的问题,可以采用一个策略:设置定时器setTimeout
,点击一次后让按钮灰掉(disable)
,暂时不可以用,一段时间后再启用。
如果只有单个按钮,直接设置定时器即可,若是存在于表格中的多个按钮,需要一一进行处理。
1、给表格中的每个对象都设置disabled
属性,默认为false
this.tableData.forEach(v=>{this.$set(v, 'disabled', false)})
2、对按钮的disabled
参数进行绑定,同时绑定点击事件
<el-table-column label="操作"><template slot-scope="scope"><el-button @click="nowPush(scope.row)" :disabled="scope.row.disabled" size="mini" type="primary">立即推送</el-button></template></el-table-column>
3、设置定时器,每点击一次按钮,将其置灰,5s后重新启用
nowPush(row){// 获取推送时间和当前时间,当再次点击时,时间间隔大于10min时才有效let notifyDateTimeStamp = row.notifyDateTimeStamplet max = notifyDateTimeStamp + 10 * 60 * 1000let now = Date.now()if(now < max) {this.$message.info('10分钟内不能重复推送')return}this.$getAxios({row.notifyConfigId}, '/permission-center/notifyConfig/resendMessage').then(() => {this.$message.success('推送成功!')this.tableData.forEach(v=>{if(v === row){v.disabled = truesetTimeout(()=>{v.disabled = false},5000)}})})}