防止重复发送ajax请求

Posted 2020-09-16 Rakishly

前端代码是当输入密码个数为6个的时候，触发ajax请求，但输入很快的时候会触发多个请求，为了防止重复发送请求。

可以利用jquery ajaxPrefilterzhong中断请求

局限性：仅仅对jquery 发送的ajax请求有作用

调用abort后jquery会执行error的方法，抛出abort的异常信息。可以使用以下方式区分出该类型的异常。

error:function(jqXHR, textStatus, errorThrown){
    if(errorThrown != \'abort\'){
        //ajax被调用abort后执行的方法
        alert(\'应用加载失败！\');
    }
}

Demo:

var pendingRequests = {};
jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    var key = options.url;
    if (!pendingRequests[key]) {
        pendingRequests[key] = jqXHR;
    }else{
        jqXHR.abort(); //放弃后触发的提交
        //pendingRequests[key].abort(); // 放弃先触发的提交
    }

    var complete = options.complete;
    options.complete = function(jqXHR, textStatus) {
        pendingRequests[key] = null;
        if (jQuery.isFunction(complete)) {
            complete.apply(this, arguments);
        }
    };
});

$.ajax({
    type:"post",
    url:url,
    data:{"act":"checkpwd","password":pwd},
    dataType:"json",
    success:function(request){
        if(request.statu == 0){
            Air_View("支付密码错误");
        }else{
            $("#walletpay").submit();
        }

    },
    error:function(jqXHR, textStatus, errorThrown){
        if(errorThrown != \'abort\'){
            //ajax被调用abort后执行的方法
            alert(\'应用加载失败！\');
        }
    }
});