how to stop ajax request if another request exist

Question

i'm trying to make infinite scrolling so when scrolling i make an ajax request to the server to get data but when scrolling a multiple ajax request is made and return the same data so how can i cancel ajax request before sending if there one already exist i tried like this

 data: ({
                        beforeSend: function (xhr) {
                            if (activeAjaxConnections != 1) {
                                xhr.abort();
                            }
                            activeAjaxConnections++;
                            //Show Loader....
                            $("#Ajax-Load-Image").css('visibility', 'visible');

                        },

all my code

    var lock_load = '1';
    var activeAjaxConnections = 1;
    var PageNumber = 2;

    $(window).scroll(function () {

        if ((Math.ceil($(window).scrollTop() - $(window).height()) * -1) <= getHeight() + 550) {
            if (lock_load === '1') {

                var xhr = $.ajax({
                    type: "POST",
                    async: true,
                    dataType: "json",
                    url: ajaxurl,

                    data: ({
                        beforeSend: function (xhr) {
                            if (activeAjaxConnections != 1) {
                                xhr.abort();
                            }
                            activeAjaxConnections++;
                            //Show Loader....
                            $("#Ajax-Load-Image").css('visibility', 'visible');

                        },
                        type: "POST",
                        action: 'Ajax_Get_SpacesAndSponsors',
                        Page: PageNumber
                    }),
                    success: function (response) {

                        PageNumber++;
                        var Message = response.spaces.Message;

                        console.log(response);
                        console.log(Message);
                        Draw_SpacesAndSponsor(response);
                        lock_load = response.spaces.Lock_load;
                        activeAjaxConnections--;
                    },
                    error: function (errorThrown) {
                        alert(errorThrown);
             n       }

                });
            }
        }
    });

but it give an error xhr is undefined pleas any help and many thanks in advance.

Answer 1

Try flags Before making ajax call set flag to true and after ajax call is made set flag to false, finally on completion of ajax request again set flag to ture

var ready = true;
    $(window).scroll(function(){
      if(ready == true){
        ready = false;
        $.ajax({
            url: "/pagination",
            cache: false,
            success: function (response){
               //response
            }
        }).always(function () {
            ready = true; //Reset the flag here
        });
      }
    });

Answer 2

use the below code, use a simple flag variable that will be set to false by the defualt, that is to say that ajax call is not occuring once if condition is met then it will set to true to say that ajax call has started, once the success: or error: call back fires the variable will be set to false so that another ajax call can be made.

  startedAjax = false;

  if (lock_load === '1') {
                startedAjax = true;
                var xhr = $.ajax({
                    type: "POST",
                    async: true,
                    dataType: "json",
                    url: ajaxurl,

                    data: ({
                        beforeSend: function (xhr) {
                            if (activeAjaxConnections != 1) {
                                xhr.abort();
                            }
                            activeAjaxConnections++;
                            //Show Loader....
                            $("#Ajax-Load-Image").css('visibility', 'visible');

                        },
                        type: "POST",
                        action: 'Ajax_Get_SpacesAndSponsors',
                        Page: PageNumber
                    }),
                    success: function (response) {
                        startedAjax = false //set is false
                        PageNumber++;
                        var Message = response.spaces.Message;

                        console.log(response);
                        console.log(Message);
                        Draw_SpacesAndSponsor(response);
                        lock_load = response.spaces.Lock_load;
                        activeAjaxConnections--;
                    },
                    error: function (errorThrown) {
                           startedAjax = false; 
                        alert(errorThrown);
                 }

                });
            }
        }
    });