点击触发ajax重复提交表单,点击事件重复请求

引子

当我们针对某个按钮绑定点击事件后，就可以随时通过点击鼠标来触发按钮的点击事件，如：

var num = 1;

$('ele').on('click',function(){

num++;

//执行的业务逻辑

})

这样num值会不断增加，依赖于num值的业务逻辑就会出错；

一般出现的场景有：

ajax请求;

问卷答题

接下来我们根据这些场景来分析下;

场景分析

1. ajax提交

当用户短时间内重复点击登录按钮时,会触发多次的表单提交;

解决方案: 当点击提交按钮后,给按钮添加disabled属性,事件完成后再removeAttr('disabled')

2. 问卷答题

当选择一个答案时,重复点击,机会造成num重复增加,可能会造成中间某些选题未答直接跳到后面的答题，而添加一个name数组判断是否重复就可以避免该问题;

总结

解决重复点击问题可以归结为标记作用位点，有两种方法:

点击触发请求后，作用点设为disabled属性，请求(或者包括请求后具体的业务流程处理)后，移除disabled属性；

记录作用点，判断作用点是否重复，重复则直接return

其实ajax还有一个更好的方法来避免重复提交,我们知道js是单线程执行事件的,所以可以根据此原理定义事件序列，重新封装ajax方法来避免。

详细见我的个人博客:链接