有什么方法能阻止“狂点提交按钮数据多次插入mysql”

Question

环境：dva.js mysql antd react

这是我做的投票，用户提交一次投票后，页面会刷新，然后提交按钮会被禁用。
主要逻辑就是在数据库去查，这个用户在这个主题是不是已经投过票了，投过了就传个check=true的值回来，把button禁用掉。

但是第一次投票时，页面刷新不及时，狂点提交按钮可以多次投票。
有什么前后端或数据库的技术能够阻止这个现象？

这是我的button的click函数，可以看到第一个dispatch传数据给后台生成投票的记录。第二个dispatch就是刷新了页面。

Answer 1

前端，可以函数节流；也可以直接声明一个变量默认为a=false，点击button了就为a=true，当a为true的时候，把button置灰，进行ajax请求，请求成功，ok，请求失败，button恢复，重新提交，你也可以看一看函数节流方面的，前端防止误触和双击，。。。。也许会有所帮助，当然了，这种情况下，前端的处理要更自然一些，如果不置灰按钮的话，也可以，点击按钮之后，直接有一个模态层，显示一下提交进度条什么的，当然这个模态层你可以通过ajax返回状态判断是否关闭，也可以主动的加一些定时器，更加友好一些

Answer 2

我是感觉限制应该在前后端都加上，前端可以在首次提交时缓存一个投票的标志位，然后每次提交时都检查下这个标志位是否存在；另外也建议在提交的信息里直接带上用户标识，这样后端每次收到信息时check下是否提交过，如果提交过返回一个error信息给前端就好。尽量不要把检查和提交的步骤在前端可见，否则等于把判断逻辑都放到前端了，那不就跟在前端直接写库没区别了？另外前端也做下防抖，避免短时间内的多次提交。

Answer 3

多次提交只响应第一次
const onClickpublish = async () => {

if(this.pending) return
this.pending = true
await dispatch(...)
this.pending = false
dispatch(...)

}

Answer 4

做积极更新，点击后立即变灰，万一投票不成功再变回来，而不是等投票成功后再更新。

当然，最好防抖动也加上。