JS原生点击按钮防重复点击效果

JS原生利用异步实现简单的防重复点击

使用场景:
项目中涉及后台交互的按钮，例如：确认转账、提交认证等等；第一次点击正常提交，但是如果在后台请求还没有返回的情况下，用户点击要给与适当的提示,如果后台数据返回了之后，又可以根据业务需求再次执行

• HTML

确认转账

• JS

var boo = true;
$("#subBtn").click(function () {
     //异步更新Boo为false,但是此处不会立即执行
     setTimeout(function () { boo = false }, 0)
     if (boo) {
         $("#subBtn").addClass("disabledStyle")
         $.ajax({
             type: "post",
             url: '请求地址',
             contentType: '',
             data: '',
             dataType: '',
             success: function (data) {
                 boo = true
                 $("#subBtn").removeClass("disabledStyle")
             },
             error: function () {
                 boo = true
                 $("#subBtn").removeClass("disabledStyle")
             }
         })
     }else{
         alert("正在提交请稍等...")
     }
 })

思路：
用一个变量的布尔值来控制是否执行后台的请求；对于这个变量的要求是：等到第一次请求发出之后调整变量的值，等到请求有结果之后再次变量过来，保证下次的正常提交。

1：定义一个全局变量boo来控制时候执行ajax请求（true表示继续执行，false表示上一次请求还没有结束，给与适当的提示）；

2：setTimeout(function(){},0} ,执行到该倒计时并不会立即执行，因为该方法属于异步执行，不管第二个参数的时间是多少，都会等待同步执行完成之后才会继续执行；（可以参考异步操作中的定时器）

3：等到请求回来之后再改变boo为true，保证下次正然可以正常提交。

**上边代码涉及的class“disabledStyle”是为了在视觉上有一个提示；当然我们也可以通过判断disabledStyle这个class是否存在（hasClass()），来判断是否执行ajax程序，可以达到一样的效果