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

[LyleRockkk]

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

[simonv3ex]

你让前端的所有请求都走一个通道，disable 的开关就在那控制，再封一个 Buttom 或其他数据相关的组件，里面的 disable 就连这个通道的 disable

[bhaltair]

1 点击 debounce
2 axja 拦截重复请求

目前做到了 1

[flashback313]

disable 其实并没有什么问题，另外可以尝试全局 loading 就是蒙层那种，一旦发出请求就弹出

[abelmakihara]

这几种我还是喜欢用 loading 其次 lodash 的

[s247769541]

封装组件，用一个 disabled 属性控制下面所有表单元素的 disabled 属性。。。 参考 element-ui 的

[px920906]

按钮 disable 掉+loading 动画就挺好。
原生 js 或者 jquery，可以封装在 ajax 库里，比如叫 btnGet，把按钮元素作为参数传进去
vue 的话，在 data 里加一个 loading 对象，属性初始值都为 false，发起请求前 loading.ajaxCall1 = true， 成功或失败后 loading.ajaxCall = false。
另外，axios 有个 cancel 的功能 -> https://github.com/axios/axios#cancellation
用这个给项目加了取消重复请求的功能 ，目前看来还不错。

[quanjw]

$("#submit").attr({"disabled":"disabled"});
$("#submit").removeAttr("disabled");

[walhu]

加一个验证码机制。每次访问之后后段刷新。这样就不怕了

[Melting]

之前为了偷懒，给请求做一个 lrucache，短时间的非 get 又是同样的请求，可以取消，用 axios.cancelToken 很好实现

[g0thic]

2 就可以了，如果你不喜欢页面 loading，就封装个按钮组件，按钮加 loading 状态

[jkmf]

@zhuweiyou 请求回来之前不允许点击 怎么提交多次呀老哥

[xianxiaobo]

v 站很多时候我好像只点击了一次,但是说我回复和上一次相同,就给我取消了.

[jevirs]

我有个想法： 利用 request 和 response 的拦截器，每一个接口对应一个状态，request 出去的时候在全局的 map 中将对应的接口状态改为 pending，新的 request 进来，如果是 pengding 状态就直接返回了；
response 回来之后，再把对应的状态改为 done，这样就可以就收新的 request 出去；
不确定 reponse 拦截器里是否能找到对应的 request...

[chen2019]

组成 [md5(data)]=有效时间 然后请求前判断 key 值为 md5(data)是否存在 结合有效时间 决定是否需要阻止这个请求就可以了

[yc8332]

前端应该就是加个变量锁住吧。。后端也是要锁住，redis increment 可以解决

[zhixuanziben]

@LiuJiang lodash 支持按需加载，只引自己想要的就行了

[winiex]

理解 debounce 的流程就好。如果不想引入库的话自己用 setTimeout 写一个也很简单。

[lizz666]

节流，最好能自己写

[zhazi]

etag

[zongwan]

不就是验证码吗。。。