如果存在另一个请求，如何停止ajax请求

Question

我正在尝试进行无限滚动，所以在滚动时我向服务器发出ajax请求以获取数据但是当滚动多个ajax请求时会返回相同的数据，那么如果有一个已经存在的话，如何在发送之前取消ajax请求我试过这样的

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

                        },

我的所有代码

    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       }

                });
            }
        }
    });

但它给出了一个错误xhr未定义请求任何帮助和许多提前感谢。

Answer 1

尝试标志在使ajax调用set flag为true之前，在调用ajax后将set flag设置为false，最后在完成ajax请求后再次设置标志为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

使用下面的代码，使用一个简单的标志变量，该变量将被defualt设置为false，也就是说如果满足条件则ajax调用不会发生一次，那么它将设置为true以表示ajax调用已经开始，一次成功：或错误：回调fires变量将被设置为false，以便可以进行另一个ajax调用。

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

                });
            }
        }
    });