这是一个创建于 1631 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如某些删除修改的功能，前端 WEB 页面，防止用户双击，或者点击了 A 功能，还未响应时又点击 B 功能
- 仅为前端简单限制，并非后端
- 主要是想有一种思路，比如加遮罩，或者请求时禁用所有可点击元素？
昨天发生一个问题就是有个用户同时点击了两个操作按钮，导致数据错乱了，现在想优化一下，以上列举的两种思路感觉都不是很优雅？
 |
1
myEzekiel 2020-07-10 14:50:21 +08:00  1
点击,弹出遮罩层,提示加载中或第一次点击完把按钮设为不可点击,直到成功或失败,再变为可点击
|
 |
3
w292614191 2020-07-10 15:53:38 +08:00 1
ajaxSetup({
beforeSend:function(){ loading... } }); |
 |
4
wafm 2020-07-10 15:54:27 +08:00
来个个位数算法确认
|
 |
5
toma77 2020-07-10 16:28:47 +08:00 1
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> |
 |
6
niubee1 2020-07-10 16:37:34 +08:00
讲一个笑话，2005 年的时候，电信还有个业务叫互联星空，其中有个活动是可以在一个页面点一个按钮，用电话话费兑换 Q 币。结果这个页面在做的时候没有做防护，结果某位仁波切兄狂点了几千次（因为那个时候网速慢，页面卡住了）结果被扣了好几千话费，兑换了好几千 Q 币，电话也欠费停机了。于是去营业厅理论，但是营业厅没法做业务回退，仁波切兄就纠集了一大群仁波切，把营业厅给砸了。
从此以后，任何用 JS submit 的操作，都会第一时间 disable 按钮。页面刷新的时候也会加上 nonce，提交后后端也会验证 nonce 。不然就会回想起仁波切的恐惧...... |
 |
7
easonHHH 2020-07-10 16:44:25 +08:00
节流？但是魔改页面可破，后端也是要做限制的
|
 |
8
lovecy OP |
 |
9
9tao 2020-07-10 17:02:07 +08:00
debounce
|
 |
11
towave 2020-07-10 18:30:11 +08:00 via Android
什么都不用的话，加个标志变量就行了
|
|
12
wafm 2020-07-10 18:57:32 +08:00
@lovecy 曾经做过一个项目，跟你的需求类似，客户要求每做一个操作前必须确认，最大限度防止误操作
我这边给下边的人出了个主意，每次操作前弹出一个全局 modal,随机生成一道和不超过 2 位数的个位数加法的算法，这样的话就不会有问题，操作人每次进行操作需要做一道非常简单的算术题，就不会误点或者错操作 |
 |
13
Jooooooooo 2020-07-10 19:37:51 +08:00
前端做限制拦住大部分
恶意发请求的后端再用锁 |
 |
14
billccn 2020-07-11 03:30:53 +08:00
我曾经干过 AJAX 发出以后用 document.write 把整个页面换成只剩下"loading..."，这时候你的 JS 代码还在跑，但是用户已经不可能再触发任何元素了。
|
Select Language