引子
当我们针对某个按钮绑定点击事件后，就可以随时通过点击鼠标来触发按钮的点击事件，如：
var num = 1;
$('ele').on('click',function(){
num++;
//执行的业务逻辑
})
这样num值会不断增加，依赖于num值的业务逻辑就会出错；
一般出现的场景有：
- ajax请求;
- 问卷答题
接下来我们根据这些场景来分析下;
场景分析
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>
总结
解决重复点击问题可以归结为标记作用位点，有两种方法:
- 点击触发请求后，作用点设为disabled属性，请求（或者包括请求后具体的业务流程处理）后，移除disabled属性；
- 记录作用点，判断作用点是否重复，重复则直接return
其实ajax还有一个更好的方法来避免重复提交,我们知道js是单线程执行事件的,所以可以根据此原理定义事件序列，重新封装ajax方法来避免。
详细见我的个人博客:链接
