【js】按钮频繁过快点击，防⽌重复提交处理
场景：收费处医⽣，为了提⾼效率，快速开单，经常会习惯性的多点保存/确认按钮；往往会发⽣多次请求，造成打印单据重复，结算⾦额对不上；故提出防⽌重复提交的控制；
解决⽅案：1.增加⼆次确认操作，弹框式确认；⽆疑会增加操作步骤，更⿇烦了。2.防抖函数，控制在⼏秒内的点击只提交⼀次请求，记录最后⼀次点击开始计时请求；（待定）3.变量开关控制，保证⼏秒之内只提交⼀次，代码块⽴即
执⾏（可取）
实现：2.防抖函数
封装⽅法例如：tools/index下Util对象中
/*
* fn [function] 需要防抖的函数
* interval [number] 毫秒，防抖期限值
* 在第⼀次触发事件时，不⽴即执⾏函数，⽽是给出⼀个期限值⽐如300ms
* 让某个时间期限（300毫秒）内，事件处理函数只执⾏⼀次。
*/
debounce(fn, interval) {
var timeout = null;//借助闭包
return function (e) {
clearTimeout(timeout);//进⼊该分⽀语句，说明当前正在⼀个计时过程中，并且⼜触发了相同事件。所以要取消当前的计时，重新开始计时
timeout = setTimeout(() => { // 进⼊该分⽀说明当前并没有在计时，那么就开始⼀个计时
fn.apply(this, arguments);
}, interval ? interval : 300);
};
},
引⼊⽅法
import { Util } from 'tools/index';
a.
handleQuery = Util.debounce((name, status, quarters) => {
console.log("---",name, status, quarters)
//代码块可接收参数
},2000)
　b.　按钮事件 handleBtn
handleBtn=()=>{
let {status, name, quarters} = this.state;
this.handleQuery(name, status, quarters);
}
　缺点：防抖函数每次会在设定时间内记录最后⼀次点击，然后开始计时，会增加业务场景中的等待时间；
3.js控制变量
全局设置⼀个变量或者state变量储存
// 按钮事件
handleBtn = () => {
if(isClick) {
isClick = false;
//事件
//定时器
setTimeout(function() {
isClick = true;
}, 3000);//3秒内不能重复点击
//执⾏代码块
}else{
message.warning("请勿重复点击！")      }
}js arguments
  效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。