前台限制ajax重复提交（利用jquery ajaxPrefilter实现）

背景
在ajax请求情况下，无论阻塞或者非阻塞（同步或者异步），点击多次按钮，会产生多次ajax请求，重复提交。

思路
在全局作用域中，维护队列，ajax请求前，将request加入到队列中，在服务器端产生响应后，从队列中清除，如果在这个期间，接收到第二次同样的请求，就将后续请求停止（abort）掉。

局限
仅仅是前台防止jquery的ajax请求。对于非jquery的ajax请求，不起作用。因为使用的是jquery的ajaxPreFilter函数，仅仅对jquery的ajax请求有作用。

var pendingRequests = {};
 
 
function generatePendingRequestKey(options){
return options.url;
}
function  storePendingRequest(key,jqXHR){
pendingRequests[key]=jqXHR;
jqXHR.pendingRequestKey = key;
}
 
 
 
 
$.ajaxPrefilter(function(options, originalOptions, jqXHR ) {
 
    //不重复发送相同请求
    var key = generatePendingRequestKey(options);
    if (!pendingRequests[key]) {
    storePendingRequest(key, jqXHR);
    } else {
    // or do other
    jqXHR.abort();
    }
    
 
 
var success = options.success;
options.success = function(jqXHR, textStatus) {
if ($.isFunction(success)) {
success.apply(this, arguments);
}
};
 
 
var error = options.error;
options.error = function(jqXHR, textStatus) {
if ($.isFunction(error)) {
error.apply(this, arguments);
}
};
 
//complete最后执行，所以清除request放在此方法中
var complete = options.complete;
options.complete = function(jqXHR, textStatus) {
// clear from pending requests
pendingRequests[jqXHR.pendingRequestKey] = null;
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
});

转载自:https://blog.csdn.net/wangjun5159/article/details/46446361