难度级别：初级及以上                                 提问概率：50% 

---

点击按钮提交数据，在项目开发中已经是一个再普通不过的需求功能了，它是那么普通，甚至在需求文档中经常会被一笔带过。但就是这样一个平凡的功能，bug列表里还是时常会有它的身影。伴随的问题就是正常情况下，单次点击没有问题，但如果被快速多次点击，就会发送多次请求，造成多次提交数据的问题。那么都有哪些办法可以解决这个问题呢，我们一起来看一下。

1 button按钮，添加disabled禁用属性

用户点击提交按钮后，先进行提交数据验证，验证通过后，为button按钮添加disabled禁用属性，然后开始调用接口，提交数据。当接口数据返回后，再将button按钮的禁用属性移除，实现代码如下

HTML代码：
<button onclick="subData()" id="submitBtn">提交</button>
Javascript代码：
<script>
function subData() {
console.log('check: 提交数据验证');
// 验证通过，为按钮添加disabled属性
let btn = document.querySelector('#submitBtn');
btn.setAttribute('disabled', true);
console.log('subData: 开始提交数据');
let subTimeout = setTimeout(() => {
window.clearTimeout(subTimeout);
subTimeout = null;
console.log('code:200, msg: 数据已返回');
// 请求成功后，取消按钮disabled属性
btn.removeAttribute('disabled');
}, 500)
}
</script>

2 为按钮设置CSS样式pointer-events属性值为none

为元素设置pointer-events样式，可以控制元素是否对鼠标事件做出反应，属性值若为none，则表示失去鼠标点击事件。当用户点击提交按钮后，先进行提交数据验证，验证通过后，为div元素设置pointer-events样式，样式属性值为none，然后开始调用接口，提交数据。当接口数据返回后，再将pointer-events样式的属性值设置为auto，实现代码如下

HTML代码：
<div onclick="subData()" id="submitBtn">提交</div>
Javascript代码：
<script>
function subData() {
console.log('check: 提交数据验证');
// 验证通过，为按钮设置pointer-events值为none
let btn = document.querySelector('#submitBtn');
btn.style.pointerEvents = 'none';
console.log('subData: 开始提交数据');
let subTimeout = setTimeout(() => {
window.clearTimeout(subTimeout);
subTimeout = null;
console.log('code:200, msg: 数据已返回');
// 请求成功后，为按钮设置pointer-events值为auto
btn.style.pointerEvents = 'auto';
}, 500)
}
</script>

3 添加开关变量

可以添加一个开关变量，默认设置为false，当用户点击提交按钮，数据验证通过，判断开关变量如果为false，则可以进行数据提交，紧接着设置开关变量为true。这样就保证了用户第二次点击按钮后，代码无法继续执行。然后开始发送请求，当接口返回数据后，再次把开关变量设置为false，保证用户可以继续点击按钮，代码如下

HTML代码：
<div onclick="subData()" id="submitBtn">提交</div>
Javascript代码：
<script>
let subSwitch = false;
function subData() {
console.log('check: 提交数据验证');
// 首先进行开关判断，只有false可以通过
if (subSwitch) {
return;
}
// 验证通过，将开关变量设置为true
subSwitch = true;
console.log('subData: 开始提交数据');
let subTimeout = setTimeout(() => {
window.clearTimeout(subTimeout);
subTimeout = null;
console.log('code:200, msg: 数据已返回');
// 请求成功后，开关变量设置为false，以保证按钮可操作
subSwitch = false;
}, 500)
}
</script>

4 使用户点击不到按钮

还有几种方式也可以阻止用户快速连续点击按钮，这几种方式出发点很相似，那就是使用户点击不到按钮。例如点击按钮后，添加一个全屏的遮罩层，层级高级按钮，同时可以考虑是否加一个loading等待效果；例如只是在按钮区域加一个遮罩层，只是能够遮盖住按钮即可；例如提前预备一个无事件按钮，当用户点击真正的提交按钮后，将提交按钮隐藏，紧接着把这个预备按钮显示出来；再例如用户点击按钮后，将提交按钮隐藏，甚至连预备按钮都不显示，最终达到的效果都是一样的。

---

刷题思考

    这道题以用于快速连续点击造成的问题为切入点，不仅可以考察求职者的工作经验是否丰富，同时还可以考察求职者在日常工作中是否善于总结，是否可以通过举一反三，回答出更多经过思考、经过实战的方案。

---

类似考点

    类似用户快速连续点击的这类问题，其实只要开发人员在工作中用心一些，基本是可以规避掉的。那么与之类似，面试官很可能还会问这些问题，例如你知道pointer-events属性的作用是什么吗？例如你知道如何使用户可以看到一个元素却不能点击吗？例如你知道如何触发鼠标双击事件吗？