在第一个完成时防止第二个 ajax 调用答案

【问题标题】：Prevent second ajax call while first one complete在第一个完成时防止第二个 ajax 调用
【发布时间】：2014-07-09 15:33:44
【问题描述】：

我知道在 stackoverflow 中有很多关于此类问题的问题，但这些问题仍然无法帮助我解决我的问题

这是jquery代码

function _get_activities_ajax() {
    $(".activity-accordian h3").click(function() {
        var catrgory      = $(this).attr("data-subject");
        var catId      = $(this).attr("id");
        if($("#"+catId+"-wrap ul").children().length==0) { 
        $("#"+catId+"-wrap").append("<div class='preloader'></div>");
            $.ajax({
                url: _getActivityAjax,
                data: {catrgory: catrgory},
                type: 'POST',
                success: function(result) {
                    $(".preloader").remove();
                    $("#"+catId+"-wrap").append(result);
                },
                error: function(e) {

                }  
            });
        }
        $(".activity-accordian h3").removeClass("active-header").removeClass("header-1");
        $(this).addClass("active-header");

        $(".categ-content ul").css("display","none");  
        $("#"+catId+"-wrap ul").css("display","block"); 
    });  
}

这是为了获取手风琴的数据集而编写的。

我需要阻止第二次调用，直到第一次调用完成。任何帮助将不胜感激。

谢谢

【问题讨论】：

您可以使用一个变量来保存您的通话状态。例如：var done = false;。在您的 success() 方法中，您可以说：done = true;
试试@VDesign的建议..
是的！ @VDesign 我会建议您将该评论作为答案。和OP请尝试一下。 +1 视觉设计。
感谢VDesign！你节省了我的时间！还要感谢 Vedant Terkar、Jai、Praveen 和 Ehsan Sajjad

标签： jquery ajax

【解决方案1】：

以前这类问题只是避免在 ajax 中使用 async 属性。由于这将冻结 GUI 几秒钟，他们即兴使用 callbacks。

在您的代码中，在第一个成功回调中编写另一个 ajax 调用。

示例：

$.ajax({
    url: _getActivityAjax,
    data: {catrgory: catrgory},
    type: 'POST',
    success: function(result) {
        $(".preloader").remove();
        $("#"+catId+"-wrap").append(result);
        //Place your second ajax      
    },
    error: function(e) {

    }  
});

【讨论】：

【解决方案2】：

添加一个保存 Ajax 调用状态的变量。

function _get_activities_ajax() {

    //Variable status ajax call
    var status = true;

    $(".activity-accordian h3").click(function() {
        var catrgory      = $(this).attr("data-subject");
        var catId      = $(this).attr("id");

        if($("#"+catId+"-wrap ul").children().length==0  && status) { //check if true

            //New ajax call so status set to false
            status = false;

            $.ajax({
                url: _getActivityAjax,
                data: {catrgory: catrgory},
                type: 'POST',
                success: function(result) {

                    //set status done to true
                    status = true;
                },
                error: function(e) {


                    //if error also set status to true
                    status = true;

                }  
            });
        }

        ...
    });  
}

【讨论】：

好一个！ +1。但我认为var status=false; 应该在函数体之外，status=false 应该在函数 ajax 调用之后 并且你应该在调用之前检查status 变量。
@VedantTerkar 怎么样真的很好！？这里的状态是什么，只是更新 var 值。
我已经更新到我的 anwser 中的代码。我忘记了 if 语句。
@Jai 很好，因为它很简单。和 +1 表示用户的热情。但这个答案仍然需要更正。
@VedantTerkar 很好，似乎在这种情况下必须使用.off()，这将是一个更好的解决方案。