Question

我有一个执行ajax功能的按钮。有时服务器滞后所以也许用户按下它多次，想到它第一次不起作用...... 主要的ajax函数如下所示：

$.ajax({
        type: "POST",
        url: "page.php",
        dataType: "html",
        data:"data=data",
        success:  function(){
                ajax2();
                ajax3();
        }
    });

由于ajax函数更新db并使其他2个ajax函数我需要阻止按钮重制主要的ajax函数... 只有当ajax2（）和ajax3（）完成时，按钮（如果按下）必须重新创建ajax函数。希望能很好地解释我的问题！

Answer 1

禁用该按钮，然后在2 ajax完成后重新启用它

/// the click event
$('yourbutton').prop("disabled",true);
/// show a loading or something....
$.ajax({
    type: "POST",
    url: "page.php",
    dataType: "html",
    data:"data=data",
    success:  function(){
        var ajax1 = ajax2();
        var ajax2 = ajax3();

        $.when(ajax1,ajax2).done(function(risp1,risp2){
            console.log(risp1,risp2);
            $('yourbutton').prop("disabled",false);
            /// hide the loading
        });
    }
});

阅读this了解更多信息

Answer 2

试试这个

//before this ajax call disable button
$.ajax({
    type: "POST",
    url: "page.php",
    dataType: "html",
    data: "data=data",
    success: makeAjaxCalls
});

function makeAjaxCalls() {
    var a1 = ajax2();
    var a2 = ajax3();
    $.when(a1, a2).done(function () {
    //enable your button here
    });
}

Answer 3

第一次激活时取消绑定事件监听器：

custom_ajax_handler = function(){
    $('#mybutton').unbind('click'); //won't intercept event from now on.

    //here is your ajax call.
    ajax2();
    ajax3();
}

$('#mybutton').click(custom_ajax_handler);

然后在ajax3中成功重新绑定它：

success : function(){
    $('#mybutton').click(custom_ajax_handler);
}

请注意，您可能不应该进行那么多的ajax调用。或者至少这样做不会对你的服务器造成滞后。

在上一次调用成功之前阻止ajax脚本执行

3 个答案: