如果存在另一個請求，如何停止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);
                 }

                });
            }
        }
    });