ajax 提交的数据的时候如何不让操作

需求：在点击某一按钮的时候触发后台请求方法。

在点击某一按钮的时候触发后台请求方法，但是可能后台数据量大，前台不知道有没有发送完成，不能让用户再次点击此方法，直到前一次数据返回完成开始。

ajax

首先想到的肯定是ajax的请求方式，点击按钮传输数据到后台，进行后台处理，ajax有同步跟异步两个方法。
异步和同步：
同步意味着执行完一段程序才能执行下一段，它属于阻塞模式，其表现在网页上的现象是——浏览器会锁定页面（即所谓的页面假死状态），用户不能操作其它的，必须等待当前请求返回数据。而使用异步方式请求，页面不会出现假死现象，可以继续操作其它。
根据我们的需求，这两种方式都满足，但是同步意味着其它操作也操作不了不太友好。

异步

<div id="send"></div>

$.ajax(function(){
async: false, //同步请求，默认情况下是异步（true）
beforeSend: function(){
	$('#send').text('正在处理，请稍等！');
	//也可以在这加上正在处加载的gif图片
}
});

但是这样做意味着所有的操作都操作不了了，而我们只要求当前这个方法不再继续执行就好了。

同步

 <a data-type="send" class="btn btn-default ml10" id="rz" disable="true">入账操作</a>

 // 发送数据到接口
    $('a[data-type="send"]', queryForm).on('click', function (event) {
    	 roleGroupSend(documentdate);
    });


var roleGroupSend = function (documentdate) {
        Common.ajax({
            url : XXXX,
            data : {
                _method : 'POST',
                documentdate : 参数
            },
            contentType : 'form',
            beforeSend:function()
            {  
            	//点击了以后就置灰不让点击
                 $("#rz").attr("disabled",true).css("pointer-events","none");
                 $('#rz').css({ opacity: 0.2});
            },
            success : function (result) {
            	
                show();
            },
            errorHandler : function (title, message,msg) {
            	show();
            },
            error : function (title, msg, msgDet) {
                show();
            }
        });
    };
    
//放开置灰
 var show = function () {
    	$("#rz").attr("disabled",false).css("pointer-events","auto");
    	$('#rz').css({ opacity: 1});
    }

实测管用

我是张同学，记录下工作中出现的问题。
不积跬步，无以至千里；不积小流，无以成江海。