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

[LyleRockkk]

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

[LiuJiang]

@alexmy 为啥不自己些呢，lodash 这么大的库

[jowan]

你没发现很多应用 点击按钮后 按钮就变成半透明或者灰色不可点击状态 并且变成 loading 了吗
其实就 1 方案的改良版
不管你用什么方法 你封装成组件就行了 1 2 3 都行
可以参考 vue 的各大框架的按钮 基本都有个 loading 属性

[LyleRockkk]

@ChefIsAwesome 没用 form 表单形式提交，直接 function 封装 ajax 走的后台接口

[arslion]

通过使用加 disabled 等控制界面的方式来保障交互体验
但逻辑才是最必要的，在前端使用 debounce 和 loading flag，在后端实现幂等接口

[toma77]

方法 2

[Woodywuuu]

前后端都得搞。
提个前端思路，用 XHR 的 abort 方法。在路由库里面做判断，可以选择性中断不想要的请求。
想了下应用场景：
1. 切换路由时将前一个请求 abort。
2. body 相同的 post 请求，在前一个还在执行的时候，不允许后续提交。
3. ....暂时没想到
目前线上用的是 axios 实现的，效果还行。

[abel1989]

自己用 VUE 封装一个 BUTTON 的组件

[Vegetable]

不封装通用功能才是蠢哦

[Raymon111111]

这种按钮组件不应该是封装好的吗?

前端做了之后能拦住大部分

然后后端再把那种恶意发请求的拦住就行了

[xrr2016]

让后端加 redis 缓存啊，每个请求一个 key，有重复就报错

[dartabe]

vue 和 react 都能封装各种按钮吧

[molvqingtai]

@LiuJiang lodash 支持按需加载啊

[zhuweiyou]

用 disable 的方式。
评论说 防抖、节流的，这只能控制点击的频率 /频次。

经常会有这种场景，比如： 点击支付。
你搞个防抖是不对的，因为我这订单就只能付一次，我多点几下就不对了。

[ChefIsAwesome]

@LyleRockkk 那就是这个 button 得有那三个状态，根据不同状态来显示不同的东西。而且 button 光显示遮罩也是不行的。用户点了一次之后，按到空格照样会造成点击。你必须得根据请求的状态，html 里 disable 或者在 onClick 里头 return 掉。如果你是个比较复杂的大程序，把 api 请求这层分出来了，为了保险起见，也应该在 api 请求那里设置 flag，请求没完成之前不能再发请求。

[keelii]

jQuery 中有个封装事件叫做 one 实际上就是事件处罚完了立即解绑。完事了你可以按需求再绑回去。

[BOYPT]

没 vue 经验，但在 angular 里面我用 ng-disable 绑定一个 ajax 过程的配置的 scope 变量，也就是相当于方法 1 吧，ajax 过程我做了封装，所有按钮只需要设置那一个参数。

[kisshere]

个人倾向于 disable

[subpo]

@flyingfz #3 post 不可能幂等

[subpo]

@flyingfz #3 搜了一下，看来是我理解的不对，忽略我

[qiaobeier]

所谓异步编程。ajax 的几个阶段都做成全局的 events 算了。