[網絡整理][轉載][記個筆記]利用jquery ajaxPrefilter防止ajax重複提交

知乎討論: https://www.zhihu.com/question/19805411

代碼實現: https://www.cnblogs.com/godLike7/p/6807256.html

原作者採用方案ajaxPrefilter:

上代碼:

端代碼是當輸入密碼個數爲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('應用加載失敗！');
        }
    }
});

效果: 執行ajax,在上一個ajax(相同url)未得到迴應前,不會再次發送請求