Stop a second ajax request while the first one is in progress

Question

Stop a second ajax request while the first one is in progress

Despite the abundance of questions on Stack Overflow addressing this issue, I still can't find a solution.

Here is the jQuery code snippet:

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"); 
    });  
}

This code snippet is designed to fetch datasets for an accordion UI.

I am looking for a way to prevent making a second call until the first one is completed. Any assistance would be greatly appreciated.

Thank you!

jquery ajax

Answer 1

Answer №1

Create a variable to keep track of the status of your Ajax request.

JavaScript

function _get_activities_ajax() {

    //Variable to store ajax call status
    var ajaxStatus = true;

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

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

            //Set status to false for new ajax call
            ajaxStatus = false;

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

                    //Set status back to true after successful call
                    ajaxStatus = true;
                },
                error: function(e) {


                    //In case of error, set status back to true
                    ajaxStatus = true;

                }  
            });
        }

        ...
    });  
}

Answer 2

Create a variable to keep track of the status of your Ajax request.

JavaScript

function _get_activities_ajax() {

    //Variable to store ajax call status
    var ajaxStatus = true;

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

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

            //Set status to false for new ajax call
            ajaxStatus = false;

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

                    //Set status back to true after successful call
                    ajaxStatus = true;
                },
                error: function(e) {


                    //In case of error, set status back to true
                    ajaxStatus = true;

                }  
            });
        }

        ...
    });  
}

Answer 3

Answer №2

In the past, similar issues were resolved by avoiding the use of the async property in ajax calls, as it would freeze the GUI temporarily. Instead, developers found a better solution by utilizing callbacks.

To implement this in your code, you can make another ajax call within the success callback of the first one.

For example:

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

    }  
});

Answer 4

In the past, similar issues were resolved by avoiding the use of the async property in ajax calls, as it would freeze the GUI temporarily. Instead, developers found a better solution by utilizing callbacks.

To implement this in your code, you can make another ajax call within the success callback of the first one.

For example:

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

    }  
});

Stop a second ajax request while the first one is in progress

Answer №1

Answer №2

Similar questions

Trigger an event upon completion of a write operation in AngularJS

Is there a way for me to access the "ViewBag" value from the Controller in a JavaScript file following an Ajax response?

Dynamic content loading using AJAX to selectively update a designated section

Saving a session variable to the database using ajax technology

Eliminate duplicate time slots in Laravel and Vuejs

Remove Chosen Pictures (Checkbox/PHP/MySQL)

What is the best way to send an Ajax Json Response to a php script?

JavaScript onclick event on an image element

If the next element in the sequence happens to be the final element, then conceal a separate

Getting JSON data from an API using $.ajax

When data is stored in Internet Explorer's cache, any changes made are not being reflected in

Using the jQuery AJAX function to modify the URL query string

The jQuery validation error message states that the object 'this.0.form' is either null or does not exist

The margin property in jQuery does not seem to be functioning properly when trying to send

Unexplainable space or padding issue detected in OwlCarousel grid gallery

Parsing nested JSON files to present data on a webpage

Error Encountered: Django - AJAX Request Not Found

Strange Behavior of Zoom DIV Effect during Rapid Hovering

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

Issues arise when jQuery functions do not execute as expected within an "if" statement following