Question

我开始在我的经典ASP页面中集成一些jQuery调用，但希望阻止用户多次单击按钮并发送多个服务器查询。这样做有什么好的实用方法？

Answer 1

这实际上取决于.ajax()来电的样子。

例如，您可以停用使用beforeSend功能发送.ajax()来电的按钮。然后在获得success或error时重新启用它：

$('#test').click(function() {
    var obj = $(this);
    $.ajax({
        beforeSend: function() {
            toggleBtn(obj);
        },
        url: '/echo/html/',
        data: 'whatever',
        success: function(data) {
            // Do whatever with data....
                alert("While an alert is showing, the JS is paused, look at the button. After clicking ok, its going to be enabled.");
            toggleBtn(obj);
        },
        error: function() {
            // Do whatever with the error.....
            // Re-enable the button, you need to do this, otherwise on an error
            // the user couldn't try again without reloading the page.
            toggleBtn(obj);        
        }
    }); 
});

查看demo here

使用简单的包装函数允许您重复使用代码：

function toggleBtn(obj) {
    if (obj.attr('disabled') == true) {
        obj.attr('disabled', false);
    }  
    else {
        obj.attr('disabled', true);    
    }
}

或者，您可以在点击事件中添加.ajaxStart()和.ajaxStop()：

$('#test').click(function() {
    $.ajax({
        url: '/echo/html/',
        data: 'whatever',
        success: function(data) {
            // Do whatever with data....
                alert("While an alert is showing, the JS is paused, look at the button. After clicking ok, its going to be enabled.");
        },
    }); 
}).ajaxStart(function() {
    toggleBtn($(this));
}).ajaxStop(function() {
    toggleBtn($(this));
});

查看demo here

另一种方法是在发生一次时禁用所有ajax调用。要做到这一点，你可以给你所有的ajax按钮一个类。然后将.ajaxStart()和.ajaxStop()附加到文档：

$(document).ajaxStart(function(e) {
    toggleBtn($('.ajax'));
}).ajaxStop(function() {
    toggleBtn($('.ajax'));
});

查看demo here

注意：警告只是为了暂停执行JS，这样你就可以看到按钮实际上被禁用了，否则会发生太快的事情，看不到发生了什么。

当然你也可以添加选项async: false,，这意味着脚本会暂停直到得到结果。

Answer 2

http://jquery.malsup.com/block/ - 是一个非常好的jquery插件，可以用于此。

或者您可以使用jquery中可用的事件。

ajaxStart()

和

ajaxComplete()

你可以使用这两个来创建你自己的函数，当你进行ajax调用时你会触发它。

通过JQuery AJAX阻止多个Web服务调用

2 个答案: