初始化后如何覆蓋jQuery.ajax成功函數？

Question

單擊按鈕會觸發ajax請求。 當用戶在第一個請求仍在加載時再次單擊按鈕時，我想用另一個請求覆蓋第一個請求的成功功能。

基本上我想這樣做：

var ajaxRequest = null;

jQuery('#mybutton').click(function () {
    if (ajaxRequest) {
        ajaxRequest.success = function () {
        };
    }

    ajaxRequest = jQuery.ajax({
        url: '...',
        success: function () {
            console.debug('do something');
        }
    });
});

但是最初的成功處理程序被調用了。 如何實現覆蓋？

Answer 1

您可以嘗試以下hack，我已經使用asynch setTimeout（而不是asynch jQuery.ajax）對其進行了測試，並且可以正常工作-

var mySuccessHander = function() {
    console.debug('Initial function');
}

var test = jQuery.ajax({
    url: '...',
    success: function() {
        mySuccessHander();
    }
});

當第二次單擊該按鈕時，請執行以下操作-

mySuccessHander = function() {
    console.debug('Overridden function');
}

Answer 2

您可以先將ajax參數設置為變量，以便稍后進行修改。

var clicks = 0,
    ajaxArgs = {
        url: '...',
        success: function () {
            console.debug('do something');
        }
    };


$('#myButton').click(function() {
    ++clicks; 
    if (clicks > 1) {
        // set the success function if clicked more than once
        ajaxArgs.success = function () {
            console.debug('Success function ' + clicks);
        }
    }

    $.ajax(ajaxArgs);
});

如果您只想在仍加載ajax時修改成功函數，則可以執行以下操作：

var loading = false,
    ajaxArgs = {
        url: '...',
        success: function () {
            console.debug('do something');
        }, complete: function () {
            loading = false;
        }
    };

$('#myButton').click(function() {
    if (loading) {
        // set the success function if ajax is still loading
        ajaxArgs.success = function () {
            console.debug('Another Success function ');
        }
    } else {
        loading = true;
        $.ajax(ajaxArgs);
    }
});

Answer 3

好問題，這將工作..

var isRequestDone = true;

jQuery('#mybutton').click(function () {
    var requestParams = {
        url: '....',
        beforeSend: function () {
            isRequestDone = false;
        },
        success: function () {
            isRequestDone = true;
            console.debug('do something');
        },
        error: function () {
            isRequestDone = true;
        }
    }
    if (!isRequestDone) {
        requestParams.success = function () {
            console.log('please wait for a while!'); 
        };
    }

    jQuery.ajax(requestParams);
});

beforeSend將在請求到達服務器之前觸發，因此當服務器上的請求isRequestDone為false時，將更改成功處理程序。 從第一個請求成功回調后，它將再次恢復為原始。