一般的后台站，如何防止用户重复点击/误点击

[lovecy]

比如某些删除修改的功能，前端 WEB 页面，防止用户双击，或者点击了 A 功能，还未响应时又点击 B 功能

• 仅为前端简单限制，并非后端
• 主要是想有一种思路，比如加遮罩，或者请求时禁用所有可点击元素？

昨天发生一个问题就是有个用户同时点击了两个操作按钮，导致数据错乱了，现在想优化一下，以上列举的两种思路感觉都不是很优雅？

[myEzekiel]

点击,弹出遮罩层,提示加载中或第一次点击完把按钮设为不可点击,直到成功或失败,再变为可点击

[lovecy]

@myEzekiel 请问下有比较好的封装么，自己写的很丑。

[w292614191]

ajaxSetup({
beforeSend:function(){
loading...
}

});

[wafm]

来个个位数算法确认

[toma77]

const [loading,setLoading] = useState(false);

const fetchFunc =async ()=>{
setLoading(true);
const data = fetch('http://xxx')
.then(function(response) {
setLoading(false);
return response.json();
})
};

<button onClick={fetchFunc}} disabled={loading}>A</botton>
<button onClick={fetchFunc}} disabled={loading}>B</botton>

[niubee1]

讲一个笑话，2005 年的时候，电信还有个业务叫互联星空，其中有个活动是可以在一个页面点一个按钮，用电话话费兑换 Q 币。结果这个页面在做的时候没有做防护，结果某位仁波切兄狂点了几千次（因为那个时候网速慢，页面卡住了）结果被扣了好几千话费，兑换了好几千 Q 币，电话也欠费停机了。于是去营业厅理论，但是营业厅没法做业务回退，仁波切兄就纠集了一大群仁波切，把营业厅给砸了。
从此以后，任何用 JS submit 的操作，都会第一时间 disable 按钮。页面刷新的时候也会加上 nonce，提交后后端也会验证 nonce 。不然就会回想起仁波切的恐惧......

[easonHHH]

节流？但是魔改页面可破，后端也是要做限制的

[lovecy]

@niubee1 哈哈哈，我这边维护的都是老旧项目了，很多质量都很差。不过话说仁波切是惹不起的意思么- -
@wafm 啥是 个位数算法确认 [懵逼.jpg]
@toma77 感谢，这个封装思路 GET 了

[9tao]

debounce

[lovecy]

@easonHHH 是的，后端有做限制的，就是前段也限制一下，想找个简单快捷的方式
@9tao 谢谢，我去了解一下

[towave]

什么都不用的话，加个标志变量就行了

[wafm]

@lovecy 曾经做过一个项目，跟你的需求类似，客户要求每做一个操作前必须确认，最大限度防止误操作

我这边给下边的人出了个主意，每次操作前弹出一个全局 modal,随机生成一道和不超过 2 位数的个位数加法的算法，这样的话就不会有问题，操作人每次进行操作需要做一道非常简单的算术题，就不会误点或者错操作

[Jooooooooo]

前端做限制拦住大部分

恶意发请求的后端再用锁

[billccn]

我曾经干过 AJAX 发出以后用 document.write 把整个页面换成只剩下"loading..."，这时候你的 JS 代码还在跑，但是用户已经不可能再触发任何元素了。