点击事件重复请求

引子

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

var num = 1;
$('ele').on('click',function(){
    num++;
    //执行的业务逻辑
})

这样num值会不断增加，依赖于num值的业务逻辑就会出错；
一般出现的场景有：

1. ajax请求;
2. 问卷答题

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

场景分析

1. ajax提交

<script async src="//jsrun.net/ejZKp/embed/all/light/"></script>

当用户短时间内重复点击登录按钮时,会触发多次的表单提交;
解决方案: 当点击提交按钮后,给按钮添加disabled属性,事件完成后再removeAttr('disabled')

<script async src="//jsrun.net/tjZKp/embed/all/light/"></script>

2. 问卷答题

<script async src="//jsrun.net/RjZKp/embed/all/light/"></script>

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

<script async src="//jsrun.net/rjZKp/embed/all/light/"></script>

总结

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

1. 点击触发请求后，作用点设为disabled属性，请求（或者包括请求后具体的业务流程处理）后，移除disabled属性；
2. 记录作用点，判断作用点是否重复，重复则直接return

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

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