前端实现，点击一次按钮，后端逻辑走完后才允许第二次点击。

---

前言

在日常工作中，我发现本模块代码并未对多次按钮点击做出限制，点击多少次，后端就会响应多少次。正常业务下，后端会对后续的请求进行判断过滤，但是在前阵子处理客户需求时，发现当客户上传超过20个文件时，后端对后续请求的过滤就会“失效”。因此，需要在前端上，对多次请求就行限制。

---

一、需求是什么？

首先根据关键字在网上寻找合适的解决方案，但是前端的解决方案都是设定一个统计点击次数的计时器，而我需要完成需求是：点击一次Button，走完一次业务逻辑后，才允许用户第二次点击。寻找无果，只能自己寻找解决方案，在上级的提醒下，采用了js中的disable属性，来控制按钮的点击。

二、实现方式

1.disable参数

disabled(是某个表单元素残废): 对于所有的表单元素都有效，包括select,radio, checkbox, button等。在button上的效果是把按钮变灰。

2.在代码中实现

代码如下（示例）：

function test() {
    jQuery("#qysSignBtn").attr("disabled", true);
····················业务start···················





····················业务end···················
	
	// 定时器是必须的，否则不会像预想的那样
 	setTimeout(()=>{
        jQuery("#qysSignBtn").attr("disabled", false);
    },1000);
}

---

总结

使用 jQuery("#qysSignBtn").attr(“disabled”, true);“夹住”业务还不够，如果不加定时器，按钮还是可以被多次点击，我猜测jquery修改“disabled”属性并展现到屏幕上的和js中业务的执行存在“延迟”，这个延迟具体是什么还不得而知。