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时，将更改成功处理程序。从第一次请求成功回调它将再次回到原始版本。

初始化后如何覆盖jQuery.ajax成功函数？

3 个答案: