各位大佬，前端按钮重复点击提交请求的最佳方法？

[LyleRockkk]

目前我知道的有 3 种 1：按钮绑定一个变量绑定 disable，请求完成后改为 false （每个按钮都要加感觉有点蠢） 2：ajax 之前 全局加 loading 弹层， 防止重复点击（如果时间很短，loading 也影响体验） 3：Vue 中 弄个指令，给一个时间，该时间内只执行一次事件（这个时间感觉也不靠谱，太长太短都不好）

[alexmy]

lodash 库的 throttle, debounce，我的个人小站就用这个。

[dmjob2015222]

防抖、节流

[flyingfz]

http 接口 的幂等性的要求 ， 了解一下 。

[GzhiYi]

节流一把梭

[otakustay]

你可以考虑做个 Button，onClick 允许返回 Promise 自己处理 disabled

[LyleRockkk]

@alexmy 刚刚看了一下这两个 func， 都是要给一个 wait 时间的，跟我说的方法 3 一个道理，我意思就是这个时间不太好给，太长太短都不行，最好能对于接口响应的时间

[Variazioni]

只有幂等的接口才能完美解决这个问题。。。

[hlwjia]

2 就可以，体验那里你多虑了。

除非你是亚马逊那种页面加载慢一点都损失几个 million 收入的公司

[roscoecheung1993]

方案一可以的，按钮做个统一封装就好了，毕竟也不是所有按钮都需要加防重提交是吧

[murmur]

disable 是一定要加的

[learnshare]

“每个按钮都要加感觉有点蠢” 写业务逻辑不就是这样么
方案 2 3 更蠢好么

[LyleRockkk]

@learnshare 先把需要的按钮单独处理再说，之后再研究全局的方式，哈哈

[cmdOptionKana]

加 disable 的好处是，可以有视觉效果让用户明白正在处理中。否则用户不知道究竟点上没有，会烦躁地多点几下。

[lihongjie0209]

@flyingfz #3 说的简单， 前端一个 disable 的事情后端复杂的要死

[Augi]

我觉得 可以用方案一，disable 可以以 loading 的形式呈现，现在好多成熟的组件库也都有 按钮的 loading 状态，可以统一封装下。

[Augi]

@alexmy 这两个函数我光看名字每次都傻傻分不清楚。中文名一个去抖，一个节流，然后就更晕了。

[Greesea]

表单一次性 token

[zppass]

写个组件吧，用的时候调用一下就可以。
有的云服务，提交 API 请求会有一个时间设置，防止时间间隔内重复提交，阿里云那个在 API 选项，放置重复攻击。

[ChefIsAwesome]

1.用户按回车照样提交。
2.提交成功了或者失败了才有可能让用户再次提交，不是什么 debounce 之类的。

要 disable 也是 disable 那个 form。你那 123 都不靠谱。任何请求都是这三个状态：pending，resolved，reject。遮罩或者按钮怎么显示，是这个 form 不同状态下的不同 ui。

[acthtml]

方案 1 最佳