2025年JavaScript - 你知道用户快速连续点击，造成多次提交数据该如何解决吗

大家好，我是讯享网，很高兴认识大家。

难度级别：初级及以上提问概率：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属性的作用是什么吗？例如你知道如何使用户可以看到一个元素却不能点击吗？例如你知道如何触发鼠标双击事件吗？

2025年JavaScript - 你知道用户快速连续点击，造成多次提交数据该如何解决吗

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

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

3 添加开关变量

4 使用户点击不到按钮

相关推荐